If you want to position something relative to another object, then the easiest way is to structure your HTML in a way that makes it possible to do that. In this situation,
position: relative and
position: absolute are your friends.
Here’s a simple example that shows how the both are used.
Typically, the element you want positioned should have a
position: absolute along with the top/bottom/left/right you desire. Once you declare this, it will position itself according to the nearest ancestor that is positioned. If there is no parent that is relatively positioned, it will position itself according to the body and will move along with the page scrolling.
So, to get back to your code - if you could make the modal div a child element of either
header, it would be easier for you to position it. Here is an example of how I positioned the modal in your code by shifting some things around in the DOM:
Here’s what I did:
- Moved the modal into the
- Added a
position: relative to
- Added the styles you see on the right of the image (absolute, right and top) to the modal div, thereby positioning it relative to the 3 dots
Hope this makes sense! All the best