我一直试图在父div上显示子div,但它会一直向下推。我想在横幅的背景图片上面加上一个横幅。
<div class="contact-wrapper">
<div class="contact-background"></div>
<div class="contact-header">
<h1>Contact Us</h1>
</div>
</div>
.contact-wrapper{
width: auto;
height: 400px;
border: 3px solid #ff0000;
margin-top: 5px;
}
.contact-background{
background-image: url("images/background1.jpg");
width: auto;
height: 400px;
object-fit: contain;
vertical-align: top;
opacity: 0.7;
position: relative;
.contact-header{
width: auto;
height: 70px;
background-color: #c1c1c1;
line-height: 70px;
}
答案 0 :(得分:0)
尝试添加
position: absolute; top:0;
转到.contact-header
类
.contact-wrapper{
width: auto;
height: 400px;
border: 3px solid #ff0000;
margin-top: 5px;
}
.contact-background{
background-image: url("http://via.placeholder.com/350x350");
width: auto;
height: 400px;
object-fit: contain;
vertical-align: top;
opacity: 0.7;
position: relative;
z-index: 1;
}
.contact-header{
width: 100%;
height: 70px;
background-color: #c1c1c1;
position: absolute;
top:0;
z-index: 2;
}
<div class="contact-wrapper">
<div class="contact-background"></div>
<div class="contact-header">
<h1>Contact Us</h1>
</div>
</div>