css 两个图片重叠覆盖

CSS中，我们可以使用position属性来实现两个图片的重叠覆盖。position有以下几种取值：

position:static（默认定位方式，元素按照正常文本流排列，不受top、bottom、left、right属性影响）position:relative（元素相对于自己原来所在的位置定位，仍然保留原来文本流占位）position:absolute（元素脱离文本流，相对于父元素定位）position:fixed（元素相对于浏览器窗口定位，始终保持在当前位置）

对于两个图片的覆盖，我们可以使用z-index属性来控制层数，z-index值越大，层数越高，越可能处于顶层。代码如下：

div class="wrapper">
      img src="img1.jpg" class="img1">
      img src="img2.jpg" class="img2">
    /div>
.wrapper {
      position: relative;
      width: 500px;
      height: 500px;
}
.img1 {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
（层数为1）}
.img2 {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
（层数为2）}
    

上面的代码中，两个图片都使用了absolute定位，相对于父元素.wrapper定位，同时也脱离了文本流。img2的z-index值大于img1的值，所以img2覆盖在img1之上。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！