HTML에서 고정 위치 지정을 사용할 수 없는 이유 분석-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML에서 고정 위치 지정을 사용할 수 없는 이유 분석

PHPz

Jan 20, 2024 am 10:20 AM

HTML에서 고정 위치 지정을 사용할 수 없는 이유 분석

HTML에서 고정 위치 지정(fixed positioning)이란 요소가 브라우저 창의 위치를 기준으로 위치가 지정되고 페이지에 따라 위치가 변경되지 않는다는 의미입니다. 두루마리. 그러나 고정 위치 지정을 사용하면 원하는 효과를 얻을 수 없는 경우도 있습니다. 이 기사에서는 HTML에서 고정 위치 지정을 사용할 수 없는 이유를 분석하고 구체적인 코드 예제를 제공합니다.

1. 고정 위치를 사용할 수 없는 이유

상위 요소가 상대 위치 또는 절대 위치로 설정되어 있지 않습니다.

요소가 고정 위치를 사용하려면 해당 상위 요소가 최소한 상대 위치를 설정해야 합니다(위치: 상대;) 또는 절대 위치 지정(위치: 절대;). 상위 요소가 위치 속성을 설정하지 않으면 하위 요소는 고정 위치를 사용할 수 없습니다.

상위 요소의 오버플로 속성 설정

상위 요소의 오버플로 속성을 숨김(overflow:hidden;)으로 설정하면 고정 위치 지정을 사용할 때 하위 요소가 숨겨집니다. 따라서 상위 요소의 오버플로 특성이 숨겨지지 않았는지 확인하거나 하위 요소를 상위 요소 외부에 배치하세요.

브라우저 뷰포트를 기준으로 한 요소 위치 지정에 대한 제한 사항

고정 위치 지정은 브라우저 창 뷰포트를 기준으로 위치 지정됩니다. 따라서 다음과 같은 제한 사항이 있습니다.

요소는 다른 요소를 기준으로 고정적으로 위치를 지정할 수 없습니다. 브라우저 창을 기준으로
요소의 고정 위치는 다른 요소의 영향을 받을 수 없습니다. 다른 요소가 배치되더라도 고정 위치 요소에는 영향을 미치지 않습니다.

요소의 위치 속성이 재정의되었습니다.

요소의 위치 속성(위치)이 다른 스타일에 의해 재정의되면 고정된 위치가 적용되지 않습니다. 요소의 위치 지정 속성이 재정의되거나 잘못 설정되지 않았는지 확인하세요.

2. 코드 예제

HTML에서 고정 위치 지정을 사용할 수 없는 이유를 보여주기 위해 아래에 특정 코드 예제가 제공됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 100%;
  height: 2000px;
}

.fixed {
  position: fixed;
  top: 20px;
  left: 20px;
  background-color: red;
  color: white;
  padding: 10px;
}

.overflow-hidden {
  overflow: hidden;
}

.relative-parent {
  position: relative;
}

.absolute-parent {
  position: absolute;
  top: 0;
  left: 0;
}

.other-element {
  position: relative;
  top: 50px;
  left: 50px;
  background-color: blue;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>
<div class="container overflow-hidden">
  <div class="fixed">我应该是固定定位，但我被隐藏了</div>
</div>

<div class="container relative-parent">
  <div class="fixed">我是固定定位，因为父元素设置了相对定位</div>
</div>

<div class="container absolute-parent">
  <div class="fixed">我是固定定位，因为父元素设置了绝对定位</div>
</div>

<div class="container">
  <div class="other-element">我不影响固定定位的元素</div>
  <div class="fixed">我是固定定位，因为没有其他元素影响我</div>
</div>
</body>
</html>

로그인 후 복사

위 코드에서는 먼저 상위 요소의 오버플로 속성을 숨김으로 설정한 경우 하위 요소의 고정 위치가 숨겨지는 상황을 보여줍니다. 그런 다음 상위 요소의 상대 위치와 절대 위치를 설정하여 고정 위치 지정의 적용을 보여줍니다. 마지막으로 다른 요소를 추가하여 고정된 위치가 다른 요소의 영향을 받지 않는 것을 확인하였다.

요약

이 문서에서는 HTML에서 고정 위치 지정을 사용할 수 없는 이유를 분석하고 이러한 이유를 보여주는 구체적인 코드 예제를 제공합니다. HTML 및 CSS를 작성할 때 요소가 고정 위치 지정을 올바르게 사용하도록 위의 문제를 해결하는 데 특별한 주의를 기울여야 합니다.

위 내용은 HTML에서 고정 위치 지정을 사용할 수 없는 이유 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.