absolute的containing block容器块计算方式和正常流有什么区别
"Absolute positioning is a commonly used technique in CSS to precisely position elements on a webpage. When an element is positioned absolutely, it is taken out of the normal flow of the document. In this state, the element is not affected by other elements and does not affect the layout of other elements.
One important aspect of absolute positioning is understanding how the containing block is calculated. The containing block is the reference frame for positioning the absolutely positioned element. The calculation of the containing block for absolutely positioned elements is different from the normal flow.
In the normal flow, the containing block for an element is determined by its nearest block-level ancestor. However, for absolutely positioned elements, the containing block is determined by the nearest positioned ancestor. A positioned ancestor refers to an element that has a position value of anything other than the default static
.
Let's consider an example to understand the difference between the containing block calculation for absolutely positioned elements and the normal flow:
<div class=\"parent\">
<div class=\"child\"></div>
</div>
.parent {
position: relative;
width: 300px;
height: 200px;
}
.child {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
}
In this example, the parent element has a relative position, and the child element has an absolute position. The parent element serves as the containing block for the child element.
Now, let's compare this with the normal flow scenario:
<div class=\"container\">
<div class=\"box\"></div>
</div>
.container {
width: 300px;
height: 200px;
}
.box {
width: 100px;
height: 100px;
}
In this case, the container element acts as the containing block for the box element since it is the nearest block-level ancestor.
To summarize, the difference between the containing block calculation for absolutely positioned elements and the normal flow is that in absolutely positioned elements, the containing block is determined by the nearest positioned ancestor, while in the normal flow, it is determined by the nearest block-level ancestor.
Understanding the concept of the containing block and how it is calculated is crucial when working with absolute positioning. It allows for precise control and placement of elements on a webpage, enabling developers to create unique and complex layouts."
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgiifki
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13