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

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

CSS의 position: fixed 속성을 사용하면 웹 요소를 페이지의 특정 위치에 고정시킬 수 있습니다. 이는 스크롤되어 페이지가 이동하더라도 요소가 항상 같은 곳에 위치하는 것을 의미합니다.

사용 방법

.element {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
}

위의 예제에서 position: fixed 속성은 해당 요소를 고정시킵니다. top, left, right, bottom 속성을 사용하여 요소의 위치를 정의할 수 있습니다. 위의 예제에서는 top: 100px와 left: 50%를 사용하여 요소를 페이지의 상단에서 100px 아래에 위치시키고 가로 중앙에 정렬하였습니다. 또한, transform: translateX(-50%)는 가로 중앙에 위치한 요소를 왼쪽으로 50%만큼 이동시키기 위해 사용되었습니다.

주요 특징

• 고정된 요소는 페이지를 스크롤해도 항상 같은 위치에 유지됩니다.
• 고정된 요소는 페이지의 다른 요소들과 겹칠 수 있기 때문에 겹치지 않도록 주의해야 합니다. z-index 속성을 사용하여 요소의 쌓임 순서를 조절할 수 있습니다.

사용 사례

• 헤더 또는 메뉴 바를 상단에 고정하여 항상 보이도록 만들 수 있습니다.
• 왼쪽 또는 오른쪽 사이드바를 고정하여 항상 특정 위치에 표시할 수 있습니다.
• 광고 배너를 페이지의 특정 위치에 고정시켜 시선을 집중시킬 수 있습니다.

position: fixed 속성은 웹 페이지의 레이아웃과 사용자 경험을 향상시키는 데 유용한 도구입니다. 따라서 적재적소에 사용하여 웹 요소를 고정시키는데 활용해보세요.