Published on

CSS - position 에 대해서

Authors
  • avatar
    Name
    piano cat
    Twitter

position의 속성 종류와 각각 쓰임에 대해서 알아보자.

position 속성 종류

  • static (default)
  • relative
  • absolute
  • fixed
  • sticky

relative 위치 지정하기

<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}
스크린샷 2023-11-27 오후 9 39 58

relative 속성을 사용하여 two 박스를 정상적인 위치에서 주어진 오프셋 만큼 위치하도록 한다. 다른 요소에는 영향을 주지않지만 원래 위치에 있는것처럼 배치되는 것이 특징이다.

absolute 위치 지정하기

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: absolute;
  top: 20px;
  left: 20px;
  background: blue;
}
스크린샷 2023-11-27 오후 9 42 58

absolute 속성을 사용하여 Two박스를 가장 가까운 조상을 기준(static 이 아닌 가장 가까운 조상)으로 오프셋 만큼 배치 된다. 가장 가까운 조상이 없는 경우엔 초기 컨테이닝 블록이 기준이 된다. 상대 위치 지정할때는 원래위치에 있는것 처럼 보였지만 절대위치로 지정한 요소는 원래 위치에서 제거된다. (Three 박스가 Two 박스 위치로 옮겨졌다.)

fixed 위치 지정

<div class="outer">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar
    lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
    Curae; Nam ac dolor augue. Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus.
    Nam vitae iaculis elit. Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum
    ut arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam sit amet luctus
    eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed
    tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed
    condimentum. Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  </p>
  <div class="box" id="one">One</div>
</div>

.box {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#one {
  position: fixed;
  top: 80px;
  left: 10px;
  background: blue;
}

.outer {
  width: 500px;
  height: 300px;
  overflow: scroll;
  padding-left: 150px;
}
스크린샷 2023-11-27 오후 9 52 12

fixed 속성을 사용하여 One박스를 스크롤에 관계없이 화면의 특정 지점에 고정되도록 할수 있다. absolute와 비슷하지만 fixed속성은 컨테이닝 블록이 뷰포트의 초기 컨테이닝 블록이라는 점에서 다르다. 즉, 위 One박스는 스크롤을 하더라도, 뷰포트를 기준으로 같은 위치에 고정된채로 유지된다.

sticky 위치 지정

sticky속성은 relative와 absolute를 합친 것이라고 할수 있다. sticky요소는 상대적으로 배치된 요소로 취급하지만, 주어진 경계선 을 지나면 고정위치를 갖게 된다. 그리고 상위요소를 영역을 넘어가게되면 고정위치에서 사라진다. 예를 들어

#one {
  position: sticky;
  top: 10px;
}

이때 one 요소는 top에서 10픽셀 떨어진 위치로 상대적으로 배치되지만, 그 경계를 넘어가면 위에서 10픽셀 떨어진 위치에 고정된다. sticky를 적용할때는 top,right,bottom,left 중 어느 요소를 설정해야 하며, 임계값을 입력하지 않으면 relative와 다를 바가 없게 된다.

참고
Discuss on Twitter • View on GitHub