[CSS] position 속성

 

📌 position 속성

: 요소를 배치하는 방법을 지정한다.

• top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정한다.

 

 

- static: 마크업 순서에 따라 배치

• 기본값
• top/right/bottom/left 속성이 무효가 됨

 

 

- relative: 기존의 자기 위치를 기준으로 이동

• top/right/bottom/left 속성 사용

 

 

- absoulte: 부모 요소(자신의 컨테이닝 블럭 요소)를  기준으로 이동

• width 값을 설정하지 않을 시 컨텐츠 크기만큼 작아지면서 뜬다. (= float와 유사)
• 상위 컨텐츠 중 static이 아닌 요소(relative/absoulte/stick)를 기준으로 삼음
  => 일부러 부모 요소에 position을 설정하기도 함

<header class="header">
    <h1 class="logo">
      <a href="/" class="logo-link">
        <img src="./g" alt=" />
      </a>
    </h1>
<header>

.header {
  height: 120px;
  padding: 0 50px;

  position: relative;
}

.logo {
  position: absolute;
  top: 45px;
  left: 60px;
}

 

 

 

- fiexed: 뷰포트에 상대적인 위치에 배치

• 스크롤 되어도 요소는 화면에서 이동하지 않는다. (스크롤에 영향 X)
  ex. 네비게이션 메뉴, 광고 등
• top/right/bottom/left 속성 사용
• 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼는다.

 

 

- sticky: 스크롤 위치가 뷰포트의 끝에 도달할 때까지 상대적인 위치에 배치

• 뷰포트 내에서 스크롤이 끝에 도달하면 해당 요소는 위치에 고정됨

 

 

 

 

참고하기

position | CSS-Tricks

 

---

참고

 

position - CSS: Cascading Style Sheets | MDN

 

position | CSS-Tricks