Position property
The position property specifies the type of posiitoning method used for an element. There are five position values and each elements are then positioned using the top, bottom, left, and right properties.
These properties won't work unless the position property is set first. Be careful, they worf differently depending on the position value.
Demo
Click on buttons and you will see below the behavior of my beautiful block depending on the ancestor block :
What you have to know about position properties, for each :
- Static:
- Relative:
- Absolute:
- Fixed:
- Sticky:
HTML elements are positionned by default static. Top, bottom, left and right have no effect.
HTML elements are posiitonned in the normal flow. The offset DOES NOT affect the position of any other elements. The positionned element depends on the starting position.
HTML elements are removed from the normal flow. Ancestor HAVE TO BE POSITIONNED. They are placed relative to the initial containing block. And they are positionned relative to its CLOSEST positionned ancestor. Margins do not collapse with other.
HTML elements are positionned relative to the initial containing block established by the viewport. If one of its ancestors has a transform, perspective, or filter property, that ancestor behaves as the containing block. Works like absolute position. Elements are removed from the normal flow.
It's a special property of position. I take so much time to make it works. Now, I can share it to you. Be careful about the ancestor, they have to not having the overflow property. Never, ever, never, never !
