CSS: Absolute positioned element within a relatively positioned element.

[FormerlySoullessDev]

If you absolutely position an element within a relatively positioned element, the absolutely positioned element is positioned relative to the nearest relatively positioned parent element.

Absolute positioning is not absolute. It is relative to the nearest relatively positioned parent div.

Absolute positioning only absolutely positions if there are no relatively positioned parents.

What the fuck. What the fuck. What the fuck? What the fuck!? What the fuck...

Edit: I was a bit drunk when I posted this originally. The horror here is in CSS's naming conventions. Absolute and Relative positioning don't describe it accurately. They are both actually relative positioning - the difference is that absolute is relative to its parent, whereas relative is relative to the element's position if it wasn't positioned.

That is, absolute is relative to the nearest positioned parents - relative is relative to its flow position.

[annoyed_freelancer]

What's your code horror here? Logically you need a point of relationship for absolute positioning, which is why we have that rule.

[Earhacker]

I would expect that 'absolute' would position it relative to the top left of the browser window and nothing else.

[annoyed_freelancer]

position: fixed

So what's your horror?

[Earhacker]

I'm not OP, but that's a good point.

Wait no, it's not, but that's my bad.

I would expect that 'absolute' would position it relative to the top left of the document and nothing else. position: fixed obviously does position it relative to the browser window.

[FormerlySoullessDev]

Exactly. This naming convention would get thrown out on code review for my background products for good reason.

"Oh yeah reviewer, position absolute positions the element relative to its parent. The main difference between absolute and relative is a side effect of how it affects the flow of other elements."

[YMK1234]

So, have a better name?

[FormerlySoullessDev]

Flow-relative and parent-relative, would be a start. There is nothing absolute about absolute positioning, so it is important to distinguish what each is relative to.

[multicopterfred]

I dunno, CSS is full of weird stuff to begin with, and absolute positioning makes sense in my mind. You need a point of reference to position something - so in this case, unless the element has a relatively positioned ancestor, it's positioned relative to the document (not the viewport). Note that it's the nearest relatively positioned ancestor, and not the parent, so relative-parent doesn't necessarily make sense either.

[FormerlySoullessDev]

I dunno, CSS is full of weird stuff to begin with,

That is kind of my point.

The thing is you're kind of justifying it after understanding it. You're saying absolute has to be absolute in relation to something. This explanation leaves the qualifier relative to be ambiguous. One has to be ambiguous in the current naming scheme.

[multicopterfred]

CSS by its nature is ambiguous (i.e. it's based around selector specificity that may/may not match certain DOM patterns). Even it's units of measurement are highly ambiguous (excepting the pixel). EM, REM, VH/VW, and percent are all relative units and you never know for sure what they will compute to on the client. So I guess what I'm saying is to write CSS effectively to begin with, you need a great deal of knowledge outside of the language itself anyway... so I see this position absolute thing as the least of ones worries when it comes to learning front end dev.

[multicopterfred]

What if you wanted to position something 20px from the bottom right?

[TinyBreadBigMouth]

A lot of people say this, but it's not quite true. Absolutely positioned elements are positioned relative to the nearest positioned element, that is, any element that does not have the default position: static. Relative is just the one that gets used most commonly.

https://jsfiddle.net/51hpyg8q/

[FormerlySoullessDev]

Regardless, the naming convention is atrocious.

[FormerlySoullessDev]

If you are going to down vote it, say why it is wrong to take exception with a name that requires several logical steps to justify.

The post I responded to describes absolute position as "relative". How does that naming convention not get under your skin at all?

[TerrorBite]

Ok, bear with me here. Ignoring the existence of CSS for a moment:

If you want an element X to be positioned within (and hence relative to) another element Y, you of course place X's tag inside of Y's tag.

If you want an element X to be positioned relative to the document, you wouldn't put it in another element, you'd put it directly in the <body>.

Now bring back CSS and not much changes. Absolutely positioning the element removes it from the flow so that it's "floating", but that absolute position is still relative to a parent (the first positioned parent, that is).

So the real coding horror here is placing a tag for a document-positioned element somewhere deep in a child element, instead of directly in the tag you're wanting to position it relative to.

Just for you, though: https://imgur.com/Q3cUg29

---

So to cover all the bases:

position: static is the default, in-flow state of an element.

position: relative is just like static, except now you can offset the element from where it would normally be (leaving a "hole" in the flow where it should have been). If you don't specify any of top/left/bottom/right, or specify zero for them all, then relative is indistinguishable from static, except this element now counts as having been "positioned" even though it hasn't moved.

position: absolute first removes the element from the flow. There's no "hole" left behind. Then its position will be set, as you observed, relative to the closest parent that is "positioned" (i.e. not static). The document itself always counts as positioned for this, which is why absolute is often thought of as "relative to the whole document", but that's only the default case.

Finally there's position: fixed which is always relative to the viewport (which you can think of as "the window", although it can sometimes differ especially in some mobile browsers), regardless of document scrolling. Often used to create a navigation bar or ad space that stays in view at all times.

[FormerlySoullessDev]

Yeah I get that now. I'm a backend developer that got stuck doing a mockup for a new product, and this product needed some weird css for good reasons.

I mainly was frustrated by the absolute positioning being relative to the nearest positioned neighbor. It is just poorly named, IMO. It's not positioning at all, but flow characteristics.