时间戳

首页 > 解决方案 > 将一个块覆盖在另一个 CSS 上

html - 将一个块覆盖在另一个 CSS 上

问题描述

我需要像这样将 div 覆盖到 div img 灰色 div 应该覆盖右上角的黄色 div 在此处输入图像描述

我试过这样，但黄色没有进入我需要的位置

.grid {
  display: grid;
  /* grid-auto-rows: 100px; 
    grid-auto-columns: 100px; */
}

.item-1 {
  grid-row: 1 / 2;
  grid-column: 5 / 4;
}

.item-2 {
  grid-row: 2 / 3;
  grid-column: 2 / 4;
}

.item-1 img {
  width: 200px;
  height: 170px;
}

.item-2 img {
  width: 368px;
  height: 350px;
}
<div class="grid">
  <div class="item-1">
    <img src="img/square.png" alt="">
  </div>
  <div class="item-2">
    <img src="img/Rectangle 24.png" alt="">
  </div>
</div>

标签： htmlcss

解决方案

你应该能够通过这样做来做到这一点。只需将您想要的元素放在您想要重叠的元素内，给它一个绝对位置，然后分配左/右值。

.box1 {
    background: yellow;
    position: relative;
    width: 200px;
    height: 200px;
    margin: 100px;
}

.box2 {
    background: gray;
    position: absolute;
    width: 200px;
    height: 200px;
    right: 120px;
    top: 120px;
}
<div class="box1">
    <div class="box2"></div>
</div>

推荐阅读