【CSS】Layout elements



static, relative and absolute or fixed take up the space in the flow of DOM


Its default value for position. top, right, bottom left, z-index does not have effect.


An element with relative is positioned based on the valus of top, right, bottom and left relateive to itself. Normally, elemets overlapped by a relative element is hidden under the element. If you change the order of overlapping, give z-index value. Its in the normal flow of the document.


This element is removed from the nomal flow of the document. however, if there is a element with not-static, the element is positioned relative to its closest ancestor, while means the position is offset from its container.


This element is also deleted from the nomal flow of positioning. It is positioned relative to the viewport.


Stick has two main parts, stiky item and sticky container.

Sticky Item

It refers to an item with the sticky. The element will float when the viewport position matches the position definition.

Sticky Container

It indicates an element which wraps the sticky item. This is the maximum area that the sticky item can float in.

Bear in mind that when you define an element with sticky, you are automatically defining the parament element as sticky container, which menas the sticky item can not get out of its sticky container.


This property only works when the element is set to 'absolute', relative, fixed. An item with larger number appears front.


THis property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. Although the item is removed from the flow of DOM, it still remenins a part of the flow. It is shifted to the left, or tight, until it touches the edge of its containing box, or another floated element.


clear property is pushed below the floart elements. when you place under a float element and unset wraping around it, you should set it.


This property sets the horizontal alignment of the inline-level contant inside a block element. For vertical alignment, vertical-align comes in.
left, right, center works intuitively.
justify streaches out the element along the line so that each element has equal witdth.


This property defines how flex items distribute along the main-axis of a flex container.

Final Words

That's all. I hope you've enjoyed this article. If you like this post, I would highly appreciate pressing liked button and sharing.