position : fixed 속성 - 특정 위치에 요소 고정시키기

position: fixed 속성 - 특정 위치에 요소 고정시키기

고정 위치에 요소를 표시하고자 할 때, position: fixed 속성을 사용할 수 있습니다. 이 속성은 요소를 문서의 나머지 내용과 배치에 영향을 주지 않고 상대적으로 고정된 위치에 유지해줍니다.

1. position 속성

position 속성은 요소의 위치를 조정하는데 사용되며, fixed 값은 요소를 고정 위치에 유지합니다. 이를 위해 HTML 문서에서 요소의 위치를 건너뛰어야 할 수 있습니다.

2. 고정 위치 설정하기

position: fixed 속성을 사용하여 요소를 고정 위치에 배치할 수 있습니다. 이때, 요소를 화면의 특정 위치에 고정시키고자 한다면 top, bottom, left, right 속성을 사용하여 좌표를 지정할 수 있습니다.

예를 들어, 다음과 같은 CSS 코드를 사용하면 요소를 화면 오른쪽 하단에 고정시킬 수 있습니다.

.fixed-element {
  position: fixed;
  bottom: 0;
  right: 0;
}

3. 다른 내용과 겹치지 않도록 설정하기

요소를 고정 위치에 배치할 때 주의해야 할 점은 다른 내용과 겹치지 않도록 설정해야 한다는 것입니다. 이를 위해 z-index 속성을 사용하여 요소의 쌓임 순서를 조정할 수 있습니다. 다른 요소보다 더 위에 표시하고자 한다면 z-index 값을 더 크게 설정하면 됩니다.

.fixed-element {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 9999;
}

마무리

position: fixed 속성은 요소를 고정 위치에 배치하는데 사용됩니다. 이를 통해 화면 상단이나 하단 등 특정 위치에 요소를 고정시킬 수 있으며, top, bottom, left, right 속성을 사용하여 좌표를 지정할 수 있습니다. 또한, 겹치는 내용을 처리하기 위해 z-index 값을 이용하여 쌓임 순서를 조정할 수 있습니다.