postion 속성

position

css의 position속성은 문서상의 요소를 배치하는 방법을 지정한다.

 

position속성에서 지정할 수 있는 값은 이와 같다.

• static
• relative
• absolute
• fixed

이렇게 position 속성을 지정해 준 요소들을 top, right, left, bottom의 속성을 통해 요소의 위치를 최종 결정한다.

 

static

• default값으로 요소를 일반적인 문서 흐름에 따라 배치한다.
• top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않는다.

relative

• 요소를 일반적인 문서 흐름에 따라 배치한다.
• 자기 자신의 위치를 기준으로 top, right, bottom, left값을 지정하여 위치를 변경할 수 있다.

absolute

• 요소를 일반적인 문서 흐름에서 제거한다.
• positions 값이 static이 아닌 가장 가까운 조상 태그의 위치에 따라 상대적으로 요소를 배치할 수 있다.
• top, right, bottom, left값을 지정하여 위치를 변경할 수 있다.
• 만일 positions 값이 지정된 조상 태그가 없다면 초기 컨테이닝 블록의 위치를 기준으로 움직인다.

fixed

• 요소를 일반적인 문서 흐름에서 제거한다.
• 초기 컨테이닝 블록을 기준으로 top, right, bottom, left값을 통해 위치를 고정시킬 수 있다.

 

See the Pen yLVbMyZ by JAEWOOKJUNG (@JAEWOOKJUNG) on CodePen.

 

---

참고

developer.mozilla.org/ko/docs/Web/CSS/position

position - CSS: Cascading Style Sheets | MDN