Position 속성 - relative, absolute, fixed

Jay Yu·2022년 5월 10일
0

학습 목표 : Position 속성중에서도 널리 쓰이는 relative, absolute, fixed에 대해 이해하고 올바른 사용법을 숙지하기.

1. What is position property in CSS?

position 속성은 레이아웃을 좀 더 정밀하게 조정할 수 있도록 해주는 유용한 CSS 속성이다. 굵직굵직한 레이아웃은 flex box나 grid box를 통해서 설정할 수 있지만 세밀한 설정을 원한다면 필수적으로 숙지해야할 CSS property이다.
position이 가질 수 있는 값으로는 static(기본 값), relative, absolute, fixed, sticky 등이 있다.

2. position : relative

모든 요소는 기본값으로 position : static을 가지고 있고 static을 값으로 가지고 있는 요소는 top, bottom, right, left, z-index 값을 설정해도 어떠한 영향을 받지 않음으로 다루지 않겠다.
position : relative를 설정하게 되면, 자기 자신을 기준으로 요소가 움직이게 된다. position값들을 이해하기 위해서는 '어디를 기준점으로 삼느냐'를 숙지하고 있어야 한다.

<body>
    <div width="200px">1</div>
    <div width="200px">2</div>
</body>

width값을 200px로 가지는 div박스를 두개 만들었고 보이는 이미지는 다음과 같다.
background-color의 값을 blue로 가지는 두번째 박스에 position : relative값을 주고 top : -20px, left : 20px 을 설정해준 결과는 다음과 같다.
변화를 명확하게 보여주기 위해서 파란색 박스에 opacity : 0.8을 적용했다. position값을 변경해준 결과 자기 자신을 기준으로 왼쪽으로부터 20px 떨어져있고, 위쪽으로 20px올라가 빨간색 박스의 영역을 침범한 것을 알 수 있다.

3. position : absolute

position : relative는 자기 자신을 기준으로 움직이기 때문에 미세한 조정을 위해서 주로 쓰인다. 그리고 페이지의 layer에서 제거되지 않는다. 그러나 position : absolute는 요소를 페이지의 layer에서 완전히 떼어낸 후에 새롭게 위치를 지정한다. absolute 값을 가지는 요소가 기준점으로 삼는 요소는 부모(조상)요소들 중에 position값이 static이 아닌 값이다. 즉 position : relative나 position : absolute 값을 가지는 부모(조상)요소를 기준으로 움직인다. 흔히 부모요소에 position : relative 값을 부여해주는 것이 일반적이다.

<body>
    <div class="red">
      <div class="blue"></div>
    </div>
  </body>

설명을 위해 red박스가 blue박스의 부모요소가 될 수 있도록 html문서를 변경했다.

div {
  width : 200px;
  height : 200px;
}
.red {
  background-color : red;
  position : relative;
}
.blue{
  opacity : 0.8;
  background-color : blue;
  position : absolute;
  top : 20px;
  left : 20px;
}

blue 박스에 position : absolute 값을 부여했다. 이제 blue박스는 자신의 조상요소들 중에 position 값이 relative이거나 absolute인 요소를 찾는다. 자신의 조상요소들 중에 position값이 relative인 red박스를 찾고, red박스의 왼쪽 상단 모서리를 기준으로 밑으로 20px, 오른쪽으로 20px만큼 이동한다.
만약 부모요소들 중 position 값이 static이 아닌 값을 찾지 못한다면 해당 screen을 기준으로 움직이게 된다.

3. position : fixed

position : fixed의 기준점은 viewport이다. 즉 화면 그 자체이다. 웹사이트를 이용하다보면 상단의 배너가 아무리 스크롤을 움직여도 사라지지 않고 그 자리에 남아있는것을 확인할 수 있다. 그 배너는 position : fixed가 적용된 배너이다.
fixed의 기준점은 viewport이기 때문에 다른 요소의 position값을 변경해 줄 필요없이 다음과 같이 작성하면 된다.

.blue {
	position : fixed;
   	top : 0;
}

이제 아무리 Scroll을 내려도 파란색 박스는 화면의 가장 상단에 존재하게 된다.

profile
니체의 마인드셋으로

0개의 댓글