HTML에서 고정 위치 지정이 허용되지 않는 이유는 무엇입니까? 원인 분석-HTML 튜토리얼-php.cn

HTML에서 고정 위치 지정이 허용되지 않는 이유는 무엇입니까? 원인 분석

PHPz

풀어 주다： 2023-12-28 18:14:06

원래의

678명이 탐색했습니다.

HTML에서 고정 위치 지정이 허용되지 않는 이유는 무엇입니까? 원인 분석

HTML에서 고정 위치 지정을 사용할 수 없는 이유는 무엇인가요?

고정 위치 지정(fixed positioning)은 사용자가 페이지를 스크롤하는 방법에 관계없이 요소가 브라우저 창 내에서 고정 위치를 가질 수 있도록 하는 CSS의 위치 지정 방법입니다. 그러나 HTML에서 고정 위치 지정의 적용은 제한적이며 다양한 요소와 시나리오에서 다양한 문제가 발생할 수 있습니다. 다음으로 HTML에서 고정 위치 지정을 사용할 수 없는 이유를 분석하고 이해를 돕기 위해 구체적인 코드 예제를 제공합니다.

우선, 고정 위치 지정의 핵심 기능은 요소가 문서 흐름의 다른 요소를 기준으로 하는 것이 아니라 브라우저 창을 기준으로 위치를 지정한다는 것입니다. 이러한 위치 지정으로 인해 경우에 따라 페이지 레이아웃이 혼란스럽거나 중복될 수 있습니다. 다음 예를 고려해보세요.

<!DOCTYPE html>
<html>
<head>
<style>
#fixedDiv {
  position: fixed;
  top: 10px;
  left: 10px;
  width: 200px;
  height: 100px;
  background-color: red;
}

#mainContent {
  background-color: yellow;
  height: 2000px;
}
</style>
</head>
<body>
<div id="fixedDiv">这是一个固定定位的元素</div>
<div id="mainContent">这是页面的主要内容</div>
</body>
</html>

로그인 후 복사

위 예에서는 고정 위치의 <div> 요소를 만들어 페이지 왼쪽 상단에 배치했습니다. 그러나 요소가 고정된 방식으로 배치되기 때문에 일반적인 문서 흐름을 무시하고 다른 콘텐츠가 올바르게 배치되지 않습니다. 이 예에서 <div id="mainContent">는 <div id="fixedDiv">와 겹치고 페이지의 기본 콘텐츠는 다음과 같습니다. 덮여있다. <div>元素，并将其放置在页面的左上角。然而，由于该元素的定位方式是固定的，它会覆盖正常的文档流，导致其他内容无法正确布局。在本例中，<div id="mainContent">将与<div id="fixedDiv">重叠，页面的主要内容将被覆盖。

其次，固定定位可能导致屏幕尺寸较小的设备上的显示问题。在移动设备中，用户通常会使用手指滚动页面，这可能会与固定定位的元素产生冲突。例如：

<!DOCTYPE html>
<html>
<head>
<style>
#fixedDiv {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 200px;
  height: 100px;
  background-color: red;
}

#mainContent {
  background-color: yellow;
  height: 2000px;
}
</style>
</head>
<body>
<div id="fixedDiv">这是一个固定定位的元素</div>
<div id="mainContent">这是页面的主要内容</div>
</body>
</html>

로그인 후 복사

在上述示例中，我们将固定定位的<div>元素放置在页面的右下角。然而，当用户在移动设备上滚动页面时，固定定位的元素可能会遮挡页面的内容，使用户难以浏览页面。这种情况下，固定定位不仅无法提供好的用户体验，而且会导致页面布局混乱。

因此，HTML中不能直接使用固定定位。然而，通过一些技巧和组合应用其他CSS属性，我们仍然可以实现类似于固定定位的效果。一种常用的方法是使用position: sticky;

두 번째로, 고정된 위치는 화면 크기가 더 작은 장치에서 디스플레이 문제를 일으킬 수 있습니다. 모바일 장치에서 사용자는 종종 손가락을 사용하여 스크롤하는데, 이는 고정된 위치의 요소와 충돌할 수 있습니다. 예: rrreee
위의 예에서는 페이지 오른쪽 하단에 고정 위치 <div> 요소를 배치했습니다. 그러나 사용자가 모바일 장치에서 페이지를 스크롤할 때 고정된 위치의 요소로 인해 페이지 내용이 가려져 사용자가 페이지를 탐색하기 어려울 수 있습니다. 이 경우 고정된 위치 지정은 좋은 사용자 경험을 제공하지 못할 뿐만 아니라 페이지 레이아웃을 혼란스럽게 만듭니다. 
따라서 고정 위치 지정은 HTML에서 직접 사용할 수 없습니다. 그러나 몇 가지 트릭과 다른 CSS 속성을 결합하여 고정 위치 지정과 유사한 결과를 얻을 수 있습니다. 일반적인 접근 방식은 position:sticky; 속성을 사용하는 것입니다. 이 속성은 상위 요소를 기준으로 요소의 위치를 지정하고 표시 영역 내에 유지됩니다. 또한 다양한 크기의 장치와 다양한 브라우저 환경에 적응하기 위한 적응형 레이아웃 및 미디어 쿼리와 같은 기술을 사용하여 유사한 효과를 얻을 수 있습니다. 
요약하자면 고정 위치 지정에는 몇 가지 특별한 위치 지정 요구 사항이 있지만 HTML에서의 적용은 제한적입니다. 따라서 더 나은 사용자 경험을 달성하려면 다른 CSS 속성 및 기술을 통해 페이지 레이아웃 및 위치 지정 문제를 해결해야 합니다. 
참조: 
🎜MDN 웹 문서: https://developer.mozilla.org/zh-CN/docs/Web/CSS/position🎜🎜CSS-Tricks: https://css-tricks.com/almanac / 속성/p/위치/🎜🎜