3 ms·
Sorry, my description of that one was a bit vague. The error I had in mind wasn't using `position: absolute` to anchor the button, but rather in not thinking ab
by exogen 5y ago
Sorry, my description of that one was a bit vague. The error I had in mind wasn't using `position: absolute` to anchor the button, but rather in not thinking about the offset parent.
As an example, if your goal is for the button to appear over the right-side inner box ("hero content") here:
+-------------------------------------------+
|+----------+ +---------------------------+|
|| nav | | hero ||
|| | | (x) ||
|| | | ||
|| | | ||
|| | | ||
|| | | ||
|| | | ||
|| | | ||
|| | | ||
|| | | ||
|| | | ||
|| | | ||
|+----------+ +---------------------------+|
+-------------------------------------------+
...then you should make that button either a direct child of that hero content (and give that container `position: relative` to make it the offset parent), or if that's not semantically acceptable, then add a new container around the hero content which will match its size/position and serve as the button's offset parent.
Otherwise, if you just let the outer container be the offset parent because it happens to place the button in the same spot in the moment, then later when more content gets added to that container, you'll end up with this:
+-------------------------------------------+
|+----------+ +---------------------------+|
|| nav | | header ||
|| | +----------------------(x)--+|
|| | +---------------------------+|
|| | | hero ||
|| | | ||
|| | | ||
|| | | ||
|| | | ||
|| | | ||
|| | | ||
|| | | ||
|| | | ||
|+----------+ +---------------------------+|
+-------------------------------------------+
...where the button is no longer over the correct box, because it was never anchored to it correctly in the first place (instead, it was anchored to that outermost container).
- hmsimha 5y agoAhh OK, interesting. That seems like more of an HTML issue than a CSS one (putting the close button element outside of the container element which it's associated with). I'll carry on doing things the way I already do then. Thanks for the detailed response