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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.