[CSS] position

[CSS] position

 

CSS position은 5 종류의 값을 가질 수 있다

 

• static
• relative
• fixed
• absolute
• sticky

 

이렇게 position이 set 되면 top, bottom, left, right property를 사용하여 element를 옮길 수 있다.

하지만 이러한 property들은 position 설정이 되지 않으면 작동하지 않는다.

 

position : static

HTML elements는 기본적으로 static을 default 값으로 갖는다.

static은 top, bottom, left, right properties에 영향 받지 않는다.

특별한 방식으로 positioning되지 않고, normal flow of the pages에 따라 positioning 된다.

div.static {
  position: static;
  border: 3px solid #73AD21;
}

 

 

position : relative

element가 normal position에 상대적으로 positioning된다.

top, right, bottom, left properties의 setting에 의해 normal position으로부터 위치가 조정된다.

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

 

 

position : fixed

viewport에 상대적으로 positioning된다.(viewport : 웹 페이지가 사용자에게 보여지는 영역)

즉 페이지에서 스크롤을 해도 같은 자리를 유지한다.

top, left, bottom, left properties를 사용한다.

 

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

 

position : absolute

relative 속성을 가진 가장 가까운 ancestor (상위 element)에 상대적으로 position 되는 방식이다. ( fixed는 viewport에 상대적으로)

상위 element가 없다면, document body에 상대적으로 움직이며, 스크롤링에 따라 움직인다.

absolute positioned element는 다른 element와 겹칠 수 있다.

단, 부모 component가 relative라는 속성을 갖고 있어야 그 내부에서 상대적으로 positioning된다.

아니면 부모 component 밖으로 나갈 수 있다.

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

 

position : sticky

사용자의 스크롤 위치에 따라 positioning되는 방식이다.

스크롤 위치에 따라 relative가 되기도 하고 fixed가 되기도 한다.

It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}