HTML/CSS 위치 지정에서 '위치: 절대'와 '위치: 고정'은 어떻게 다릅니까?

상위 또는 창을 기준으로 고정된 요소 위치

HTML 및 CSS에는 요소를 배치하는 두 가지 주요 방법이 있습니다. 즉, 상위를 기준으로 합니다. 또는 창을 기준으로 합니다.

위치 요소는 창을 기준으로 고정됩니다. 상위

상위 요소를 기준으로 고정된 요소의 위치를 ​​지정하려면 다음 CSS 속성을 사용하세요.

position: absolute;

요소의 위치가 절대값인 경우 해당 위치는 상위 요소를 기준으로 결정됩니다. 상위 요소를 즉시 포함합니다. 예:

#parent {
  position: relative;
}
#child {
  position: absolute;
  left: 50px;
  top: 20px;
}

이 예에서 하위 요소는 상위 요소의 왼쪽에서 50픽셀, 위쪽에서 20픽셀에 배치됩니다.

위치 요소 고정 창을 기준으로

창을 기준으로 고정된 요소의 위치를 ​​지정하려면 다음 CSS를 사용하세요. 속성:

position: fixed;

요소의 위치가 고정되면 해당 위치는 뷰포트를 기준으로 결정됩니다. 예:

#my-element {
  position: fixed;
  right: 0;
  top: 120px;
}

이 예에서 my-element는 뷰포트 상단에서 120픽셀, 오른쪽에서 0픽셀에 위치합니다.

위 내용은 HTML/CSS 위치 지정에서 '위치: 절대'와 '위치: 고정'은 어떻게 다릅니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!