[分享]css不在同一层

在 CSS 中，如果两个元素不在同一层，即一个元素是另一个元素的父元素或子元素，那么我们需要使用不同的 CSS 属性来控制它们之间的关系。如果一个元素是另一个元素的子元素，我们可以使用 属性来控制它...

在 CSS 中，如果两个元素不在同一层，即一个元素是另一个元素的父元素或子元素，那么我们需要使用不同的 CSS 属性来控制它们之间的关系。

如果一个元素是另一个元素的子元素，我们可以使用 position 属性来控制它们之间的关系。当子元素的 position 属性设置为 absolute 或者 fixed 时，它的位置是相对于最近的已定位（父元素的 position 不为 static）的祖先元素来计算的。如果父元素没有设置 position 属性，则子元素的位置是相对于文档的浏览器窗口来计算的。

父元素 {
  position: relative;
}

子元素 {
  position: absolute;
  top: 0;
  left: 0;
} 

如果一个元素是另一个元素的父元素，则我们可以使用 z-index 属性来控制它们之间的深度。当两个元素重叠时，z-index 属性的值越大，元素就越在上面。

父元素 {
  position: relative;
  z-index: 1;
}

子元素 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
} 

另外，我们还可以使用 CSS 选择器来选择不同层次之间的元素。例如，我们可以使用后代选择器 E F 选择所有被元素 E 包含的元素 F。同样，我们可以使用子选择器 E > F 选择作为元素 E 直接子元素的元素 F。

总之，在 CSS 中，控制不同层次之间的元素之间的关系是非常重要的。通过正确的使用 CSS 属性和选择器，我们可以创建出漂亮而且有层次感的网站。