html - Div 的堆栈相互叠加

Question

第二个 div 堆叠在第一个 div 之上，第一个 div 不可见我如何将它定位在第一个 div 下方

.shop {
    width: 100%;
    height: 1000px;
    background-color: #ffffff;
    position: relative;
    justify-content: center;
    display: flex;
}
.bell {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

<div class="shop"></div>
<div class="bell">
        <img src="bell.png" alt="">
    
  </div> 

标签： htmlcss

Answer 1

这是你想要做的吗？:)

.shop {
  width: 100%;
  height: 1000px;
  background-color: #000;
  justify-content: center;
  display: flex;
}

.bell {
  background-color: red;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

img{

width : 30%;

}

<div class="shop"></div>
<div class="bell">
        <img src="https://images.pexels.com/photos/1289845/pexels-photo-1289845.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
    
  </div>