[分享]css与同胞的相对位置

CSS中的相对定位和同胞元素有着密不可分的关系。在CSS中，元素的位置不是单单由它自身的样式决定，而是有很多与周围元素相关的因素。相对定位就是其中之一，它是指元素相对于它原本应该在的位置偏移一定的距...

CSS中的相对定位和同胞元素有着密不可分的关系。在CSS中，元素的位置不是单单由它自身的样式决定，而是有很多与周围元素相关的因素。相对定位就是其中之一，它是指元素相对于它原本应该在的位置偏移一定的距离，而且这个偏移不会对其他元素造成影响。

 .box{
    position: relative;
    left: 50px;
    top: 30px;
  } 

上面的代码将.box元素相对于它原本应该在的位置向右偏移50px，向下偏移30px。这个偏移只影响了.box元素本身，而不会影响其他元素。但是要注意，该元素的偏移如果超出了它容器的范围，那么会对其他元素造成影响。

与同胞元素有关的是相对定位的z-index属性，该属性是用来控制元素的层叠顺序的。如果两个元素重叠在一起，那么z-index较大的元素会盖在z-index较小的元素之上。但是如果两个元素的z-index相同，那么它们的层叠顺序就取决于它们在HTML文档中的顺序了，也就是先出现的元素会在上面。

 .box1{
    position: relative;
    z-index: 1;
  }
  .box2{
    position: relative;
    z-index: 2;
  } 

上面的代码中，.box2元素的z-index比.box1元素更大，所以它会盖在.box1元素上面。但是如果将两者的z-index都设为1，那么就会根据它们在HTML中的顺序来决定哪个在上面了。