CSS之包含块(contatining block)

CSS的“包含块”是指元素的布局上下文，它决定了元素如何定位和计算一些特殊的特性，如相对定位和绝对定位。

对于绝对定位的元素，它的包含块是最近的定位祖先元素（即position属性值不是static的祖先元素）。如果没有这样的祖先元素，绝对定位元素的包含块则是初始包含块（即初始视口）。

对于相对定位的元素，它的行为就像它是静态定位的，因此它的包含块就是其在文档树中的父元素。

这里是一个简单的例子，展示了包含块对绝对定位元素的影响：

HTML:

<div class="relative-div">
  <div class="absolute-div">
    我是一个绝对定位的元素。
  </div>
</div>

CSS:

.relative-div {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: lightblue;
}
 
.absolute-div {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 100px;
  height: 50px;
  background-color: coral;
}

在这个例子中，.absolute-div的包含块是.relative-div，因此.absolute-div相对于.relative-div定位，即在其右上角有10px的外边距。