【CSS】Layout elements

Position

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

static

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

relative

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.

absolute

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.

fixed

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

sticky

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.

z-index

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

float

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

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

text-align

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.

justify-content

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.