Why doesn't CSS absolute work with a static parent?
Asked Answered
E

2

9

W3Schools says that

element with position: absolute is positioned relative to the nearest positioned ancestor. Where positioned element is one whose position is anything except static.

My question is why are static elements excluded?

I know that I can set

position: relative;
left:0px;
top:0px;
right:0px;
bottom:0px

which is the same as position:static, but in my opinion, it looks like a workaround.

Earle answered 15/12, 2015 at 12:53 Comment(1)
Because sometimes you don't want a parent, which is static by default, to affect an absolute positioned child.Lastminute
G
6

Just position: relative will do.

This is a good thing, because otherwise the browser will have to apply calculations on every element instead of being able to take shorter routes for static positioning.

It also means you can have arbitrary containers, so long as they're static, and still have an element be positionable relative to the container of your choice.

Grieco answered 15/12, 2015 at 12:56 Comment(0)
M
7

My question is why static elements are excluded?

Because otherwise absolute wouldn't be able to position with respect to anything other than the element's immediate parent.

I know that I can set position: relative;left:0px;top:0px;right:0px;bottom:0px

You don't need to explicitly set the distances. Just the position property will do.

Monteith answered 15/12, 2015 at 12:56 Comment(0)
G
6

Just position: relative will do.

This is a good thing, because otherwise the browser will have to apply calculations on every element instead of being able to take shorter routes for static positioning.

It also means you can have arbitrary containers, so long as they're static, and still have an element be positionable relative to the container of your choice.

Grieco answered 15/12, 2015 at 12:56 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.