Home > Article > Web Front-end > Detailed explanation of CSS absolute positioning
Detailed explanation of CSS absolute positioning
- (*-*)浩Original
- 2019-12-16 16:31:233218browse
An element box set to absolute positioning is completely removed from the document flow and positioned relative to its containing block, which may be another element in the document or the initial containing block.
#The space that the element originally occupied in the normal document flow is closed, as if the element did not exist. The element generates a block-level box after positioning, regardless of what type of box it originally generated in the normal flow.
# CSS absolute positioning (Recommended learning: css tutorial )
Absolute positioning makes the position of the element have nothing to do with the document flow, so it does not occupy space. This is different from relative positioning, which is actually considered part of the normal flow positioning model because the element's position is relative to its position in the normal flow.
The layout of other elements in the ordinary flow is as if the absolutely positioned element does not exist:
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}As shown below:
CSS absolute positioning example
The position of an absolutely positioned element is relative to the nearest positioned ancestor element. If If an element has no positioned ancestors, its position is relative to the original containing block.
The main issue with positioning is to remember the meaning of each positioning. So, now let's review what we learned: relative positioning is "relative to" the element's initial position in the document, while absolute positioning is "relative to" the nearest positioned ancestor element, if no positioned ancestor exists element, then "relative to" the original containing block.
Note: Depending on the user agent, the initial containing block may be a canvas or HTML element.
Tip: Because absolutely positioned boxes have nothing to do with document flow, they can cover other elements on the page. The stacking order of these boxes can be controlled by setting the z-index property.
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>
</html>The above is the detailed content of Detailed explanation of CSS absolute positioning. For more information, please follow other related articles on the PHP Chinese website!