Home > Article > Web Front-end > Why is fixed positioning not allowed in HTML? Cause Analysis
Why is fixed positioning not allowed in HTML? Cause Analysis
- PHPzOriginal
- 2023-12-28 18:14:06596browse
Why can’t fixed positioning be used in HTML?
Fixed positioning (fixed positioning) is a positioning method in CSS that allows elements to have a fixed position within the browser window, no matter how the user scrolls the page. However, the application of fixed positioning in HTML is limited, and different problems may occur in different elements and scenarios. Next, we will analyze why fixed positioning cannot be used in HTML and provide specific code examples to facilitate understanding.
First of all, the core feature of fixed positioning is that the element is positioned relative to the browser window, not relative to other elements in the document flow. This positioning may result in confusing or overlapping page layouts in some cases. Consider the following example:
<!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>In the above example, we created a fixed-positioned <div> element and placed it in the upper left corner of the page. However, because the element is positioned in a fixed way, it overrides the normal document flow and prevents other content from being laid out correctly. In this example, <code><div id="mainContent"> will overlap with <code><div id="fixedDiv">, and the main content of the page will be covered. <p>Secondly, fixed positioning may cause display issues on devices with smaller screen sizes. On mobile devices, users often use their fingers to scroll, which can conflict with fixedly positioned elements. For example: </p><pre class='brush:html;toolbar:false;'><!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></pre><p>In the above example, we placed the fixed-positioned <code><div> element in the lower right corner of the page. However, when users scroll the page on mobile devices, fixedly positioned elements may obscure the content of the page, making it difficult for users to navigate the page. In this case, fixed positioning not only fails to provide a good user experience, but also leads to confusing page layout. <p>Therefore, fixed positioning cannot be used directly in HTML. However, with some tricks and a combination of applying other CSS properties, we can still achieve something similar to fixed positioning. A common approach is to use the <code>position: sticky; attribute, which allows an element to be positioned relative to its parent and remain within the visible area. In addition, similar effects can be achieved using techniques such as adaptive layouts and media queries to adapt to different sized devices and different browser environments.
To sum up, although fixed positioning has some special positioning requirements, its application in HTML is limited. Therefore, we need to solve the problems of page layout and positioning through other CSS properties and technologies to achieve a better user experience.
Reference:
- MDN Web Documentation: https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
- CSS -Tricks: https://css-tricks.com/almanac/properties/p/position/