Question

我一直试图在父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;

}

Answer 1

尝试添加

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>

如何将子div放在父div背景图片上？

1 个答案: