3 ms·

> Or, using absolute position to, say, anchor a close button to the top right of an element. Sure, the way you did it happened to put it visually in the right s

> Or, using absolute position to, say, anchor a close button to the top right of an element. Sure, the way you did it happened to put it visually in the right spot, but it's not actually in the right spot according to the layout engine because its offset parent is not the element you're trying to anchor it to, so if other content gets put in there eventually, it will be in the wrong spot. I'm absolutely guilty of this one and would love to know the correct way to do it if you have a resource handy. I generally feel like working with CSS (or ideally Tailwind now) is an uphill battle. In my defense I would also give the container a padding which should (in theory) prevent any of its statically positioned children from overlapping. But as a full-stack developer I often feel like this is the domain of people who spend their entire career focusing on design, and generally when I'm working in this realm its because we don't have one of those people.

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 ago
  Ahh 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
brundolf 5y ago
Note that if you set `position: relative` on the container element, the button will stay in the right position no matter where the dialog (or whatever) moves later

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 ago
Ahh 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

brundolf 5y ago

Note that if you set `position: relative` on the container element, the button will stay in the right position no matter where the dialog (or whatever) moves later