언제 위치:고정과 위치:고정을 사용해야 합니까?

position:sticky와 position:fixed의 차이점 공개

CSS 위치 지정 속성 간의 미묘한 차이를 이해하는 것은 초보자에게 어려울 수 있습니다. 이 기사에서는 position:sticky와 position:fixed의 미묘한 차이점을 자세히 살펴보고 CSS 실력을 향상시키기 위해 고유한 기능을 명확히 합니다.

position:fixed와 position:sticky

위치:고정

• 요소를 컨테이너 또는 뷰포트 내의 특정 위치에 고정합니다.
• 컨테이너 스크롤과 관계없이 고정된 상태를 유지합니다.

위치:고정

• 처음에는 위치:상대적처럼 동작하며 요소 흐름에 영향을 주지 않습니다.
• 지정된 오프셋을 넘어 스크롤할 때 , position:fixed로 전환되어 요소를 해당 위치에 "고정"합니다.
• 초기 위치로 다시 스크롤하면 position:relative로 되돌아갑니다.

예

다음 HTML 및 CSS를 고려하세요.

<code class="html"><div class="container">
  <div class="sticky-element">Sticky Element</div>
  <div class="fixed-element">Fixed Element</div>
</div></code>

<code class="css">.container {
  height: 100vh; /* Set the container to full viewport height */
  overflow-y: scroll; /* Enable vertical scrolling within the container */
}

.sticky-element {
  position: sticky;
  top: 10px; /* Specifies the offset from the top before stickiness applies */
  width: 200px;
  height: 200px;
  background-color: blue;
}

.fixed-element {
  position: fixed;
  top: 0; /* Sets the fixed position from the top of the viewport */
  width: 200px;
  height: 200px;
  background-color: red;
}</code>

동작:

스크롤할 때 고정 요소는 다음까지 그대로 유지됩니다. 뷰포트 상단에 도달하면 고정 요소처럼 상단에 달라붙습니다. 반면 고정 요소는 컨테이너 스크롤과 관계없이 초기 위치에 고정된 상태로 유지됩니다.

위 내용은 언제 위치:고정과 위치:고정을 사용해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!