Div 的堆栈相互叠加

Question

The second div stacks on top of the first div and the first div invisible How can i position it below the first 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>

Answer 1

Is this what you are trying to do? :)

 .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>