CSS Position property

Another way to layout on our page-

We have learned CSS box model and Flexbox that are static to layout elements on our page (static positioning).

Another way to lay out our elements: CSS Positioning and Float property. (Flexbox is for the entire page layout )

Position Property

The position property defines how an HTML element is positioned in the document. By using position property, you can decide the images and text position in a way you want to place them on the document.

position: static | relative | absolute | fixed | sticky

static:
[default setting] It is placed in the HTML document in accordance with document flow. The top, bottom, right, left properties have no effect.

The second div has the top and left set to 0px and 200px, but it is not changing anything. Because like I’d said, position: static doesn’t accept top, bottom, right, left properties.

relative:
Positioning based on the previous element (mainly the parent element) by connecting it naturally. It will be placed relative to its normal position. (The position change occurs relatively based on where it was supposed to be).

So starting from where it supposed to be…(bottom of the first box), it calculates top: 0 and left: 200px;

absolute:
Specify and place elements at the desired location.

Right after you set the absolute property, it will automatically try to find the parent element. In this case, the parent element is the class div named ‘container’. I have set the container with the border, and the class div named div2 (grey box) can move or set based on the borderline, which is the parent of div2.

fixed:
Pinned and placed at the specified location. The starting position will be the viewport.

If fixed occurs at a position change based on the viewport, the sticky is fixed to its current position within the parent element. (sticky: 부모 요소 안에서의 현재 자신의 위치에 고정! I’m writing it in Korean to make myself clear 😳)

sticky:
Sticky is positioned the same as relative position until its containing block reaches a specified threshold. And when the threshold is met, the element is now stuck to its specified position. This is often used for footers which usually remain at the bottom of the document. It requires to use of top, bottom, left, and right properties when using.

Float and Clear Property

Nowadays, people use float for its real purpose.

Its real purpose is to do what is name implies: Float the elements around each other!

In most cases, we use float to wrap images and text together.

And remember, float property removes any elements we apply it to from the normal flow. We are basically picking up that element and floating it around, wherever we wan.

And if you want to escape from float property, you must clear it out with the clear property.

clear property takes (left-clearing only left items, right-clearing only right items, or both-left and right) values.