CSS 3분 끝장내기 #2 position ?

 

position

 

position은 element의 포지션 모드를 

결정하는 요소다. position 요소에는 

5가지 모드가 있다.

 

• static
• relative
• fixed
• absolute
• sticky

 

 

position: static

HTML은 default값으로 static을 설정한다.

가장 많이 쓰이는 element인 <div> 또한

기본값이 static이다.

 

element가 static으로 설정되어 있으면

right, left 등의 요소에 작동하지 않는다.

 

 

position: relative

 

relative 모드가 적용되면, 정상적인 위치에서

아이템이 벗어나서 조정된다. 임의로 조정된

위치에 다른 아이템이 추가 조정되지는 않으니

신중하게 공간을 계산/배치해야 한다.

 

 

 

Fixed

Fixed 모드는 뷰포트를 기준으로 아이템의

위치를 고정시키는 기능을 한다.

 

심지어 스크롤을 내리더라도 동일한 위치에

아이템을 배치하는 기능을 한다.

top, bottom, right, left 기능이 모두 작동한다.

 

Relative와는 다르게 불필요한 공간을 

남기지 않는다. 

 

Absolute

Absolute는 주변에 있는  relative 모드 아이템에

상대적으로 위치하게 된다. 상위 항목(parnets)가

없으면 abolute는 더 상위 아이템을 찾아서 

위치하게 된다.

 

absolute 모드가 적용되면

일반적인 포지셔닝 모드가 작동하지 않게된다.

상위 아이템에 따라서 상대적으로 적용되는

기능들만 작동한다.

 

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

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

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

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

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