찾으시는 정보가 있으시다면
주제별reference를 이용하시거나
우측 상단에 있는 검색기능을 이용해주세요

Position

Specifies the type of positioning method used for an element

Elements are then positioned using the top, bottom, left, and right properties

However, these properties will not work unless the position property is set first

They also work differently depending on the position value

Five different position values : static, relative, fixed, absolute, sticky

Position:static;

HTML elements are positioned static by default

An element with this, is not positioned in any special way;

It is always positioned according to the normal flow of the page

Position:relative;

An element with this, is positioned relative to its normal position

Setting the properties(like top, right ..) of a relatively-positioned element will cause it to be adjusted away from its normal position

Other content will not be adjusted to fit into any gap left by the element

Position:fixed;

An element with this, is positioned relative to the viewport

Which means it always stays in the same place even if the page is scrolled

The top~~left properties are used to position the element

Position:absolute;

An element with this, Is positioned relative to the nearest positioned ancestor

However, if an absolute element has no positioned ancestors, it uses the document body

Absolute positioned elements are removed form the normal flow, and can overlap elements

Position:sticky;

An element with this, is positioned based on the user’s scroll position

It toggles between relative and fixed, depending on the scroll position

It is positioned relative until a given offset position is met in the viewport – then it “sticks” in place

div.sticky{
position : -webkit-sticky; /* Safari requires a -webkit- prefix */
position : sticky;
top : 0;	/* must also specify at least one of top~left for sticky positioning to work*/
}

z-index

When element are positioned, they can overlap other elements

The z-index property specifies the stack order of an element

It only works on positioned elements and flex items

An element can have a positive or negative stack order

float, clear

float property specifies how an element should float

clear property specifies what elements can float beside the cleared element and on which side

float property is used for positioning and formatting content, and can have one of the following value

• Left, right, none, inherit

When use the float property, and we want the next element below we will have to use the clear property

clear property specifies what should happen with the element that is next to a floating element

When clearing floats, should match the clear to the float