absolute 的 containing block( 容器块)计算方式跟正常流有什么不同？

最新推荐文章于 2023-03-31 19:55:19 发布

weixin_30825581

最新推荐文章于 2023-03-31 19:55:19 发布

阅读量315

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yxbje/p/7359048.html

本文详细解析了CSS中的不同定位方式，包括static、relative、absolute及fixed等，并解释了如何确定元素的containing block及其具体规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

无论属于哪种,都要先找到其祖先元素中最近的 position 值不为 static 的元素,然后再判断：
1、若此元素为 inline 元素,则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；
2、否则,则由这个祖先元素的 padding box 构成。如果都找不到,则为 initial containing block。

补充：
1. static(默认的)/relative：简单说就是它的父元素的内容框(即去掉 padding 的部分)
2. absolute: 向上找最近的定位为 absolute/relative 的元素
3. fixed: 它的 containing block 一律为根元素(html/body),根元素也是 initialcontaining block

转载于:https://www.cnblogs.com/yxbje/p/7359048.html