Skip to main content

position

Position

Position

Static : By default, every element has a static Position, therefore the element will follow the usual page flow. If a left/right/top/bottom/z-index is set, the element will have no impact.

Relative : An element specified with the position attribute relative is positioned in relation to its default position. A relatively-positioned element will be moved from its default position if the top, right, bottom, left and z-index properties are changed.

Absolute : Absolute positions an element relative to its parent, affecting the layout around it.. The top, right, bottom, left, and z index properties provide offsets from the contained block's boundaries.

Fixed : When an element has position: fixed;, it is placed relative to the viewport, meaning it always remains in the same spot regardless of how far the page is scrolled.The element's position can be adjusted using the top, right, bottom, left, and z index attributes.

Sticky : A mix of fixed and relative position is sticky positioning. When the element reaches a predetermined threshold, it is considered as fixed positioned; before to that, it is treated as relative positioned.