[分享]css中div的位置层级

在CSS中，div被用来划分一个文档为各个块，使得页面更易于组织布局。div的位置和层级是CSS页面布局中的关键概念。 标题 这是一段文本。 在上面的代码中，我们使用了一个名为.conta...

在CSS中，div被用来划分一个文档为各个块，使得页面更易于组织布局。div的位置和层级是CSS页面布局中的关键概念。

<div class="container">
  <div class="col-md-6">
    <h2>标题</h2>
    <p>这是一段文本。</p>
  </div>
  <div class="col-md-6">
    <img src="image.jpg" alt="图片">
  </div>
</div> 

在上面的代码中，我们使用了一个名为.container的div作为整体的容器，内部嵌套了两个col-md-6样式的div。在Bootstrap框架中，col-md-6样式代表将一个容器分为两个等宽的部分。两个div的位置都是相对于.container的位置来确定的。

在CSS中，div的层级是由其在HTML文件中的嵌套顺序来确定的。CSS会按照HTML的层级顺序，依次渲染每一个div。也就是说，在上面的代码中，左边的div会先被渲染，然后是右边的div。

有时候，我们希望改变某些div的层级，使其在页面中更靠前或者更靠后。这时候，我们可以使用CSS中的z-index属性。例如：

<div class="box1"></div>
<div class="box2"></div> 

.box1 {
  background-color: red;
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 2;
}
.box2 {
  background-color: blue;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50px;
  top: 50px;
  z-index: 1;
} 

在上面的代码中，box1被渲染在box2的上面，这是因为box1的z-index属性设置为2，而box2的z-index属性设置为1。