两个div 元素居中重叠

汤米粥

于 2024-12-26 14:52:21 发布

阅读量148

点赞数 3

文章标签： java 前端服务器

本文链接：https://blog.csdn.net/nnmmbb/article/details/144744515

版权

  <view class="parentDiv">
      <image class="div1" src="{{list[0][4]}}"></image>
      <image class="div2" src="{{list[1][4]}}"></image>
  </view>
  <veiw>我是下面的元素</view>

.parentDiv{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px; //一定要设置父容器的高度，不然下面的元素会跑上来。
    margin-bottom: 50px;
}
.div1{
  position: absolute;
  width: 120px;
  height: 120px;
  z-index: 1;
}
.div2{
    position: absolute;
    width: 120px;
    height: 120px;
    z-index: 2; /* 提升z-index使其在第一个box之上 */
}