Question

我使用两个位置为relative且位置为absolute的div。它们工作正常，但问题是当我在它们下方放置另一个div时，它应该在上面的div /背景图像之后开始，但它会落后。这是小提琴。我无法上传图片。

这里是代码：

＆＃13;

.banner{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image:url('../images/main.png');
  height: 100%;
}

.banner div{
  font-family: young;
  top: 0;
  bottom: 0;
  left: 0;
  display: table;
  right: 0;
  text-align: center;
  margin: auto;
  width: 100%;
  position: absolute;
  color: white;
}

.banner h1{
  font-size: 70px;
}

.logo{
  position: relative;
  background-color: #cccccc;
  background: rgba(204, 204, 204,0.8);
}

＆＃13;

<div class="banner">
  <div>
    <h1>Let's Move Together</h1>
  </div>
</div>

<div class="logo" align="center">
  <img src="images/logo.png" class="img-responsive" />
</div>
<div style="">
  <h1>asdadadas</h1>
  <h1>asdadadas</h1>
  <h1>asdadadas</h1>
  <h1>asdadadas</h1>
  <h1>asdadadas</h1>
  <h1>asdadadas</h1>
  <h1>asdadadas</h1>
  <h1>asdadadasaa</h1>
</div>

＆＃13;

Answer 1

假设你想要＆＃39; asdadadas＆＃39;内容低于标题＆amp;捐赠按钮：

<div class="content-under">
<h1>asdadadas</h1>
<h1>asdadadas</h1>
<h1>asdadadas</h1>
<h1>asdadadas</h1>
<h1>asdadadas</h1>
<h1>asdadadas</h1>
<h1>asdadadas</h1>
<h1>asdadadasaa</h1>
</div>

然后在CSS中

.content-under {
    position:absolute;
    top:60%;
}

请参阅：https://jsfiddle.net/04ad4ok0/

Answer 2

我试图让这更简单。我希望它适合你。

你有一张带背景图片的横幅。
除此之外，您还将标题置于中心（为了简单起见，我删除了包装<div>）
然后你有徽标包装。图像是内联元素，因此如果您想将其居中，则将text-align: center应用于父级。

＆＃13;

.banner{
  width: 100%;
  height: 80px; 
  
  background-image:url('http://placehold.it/200x40/');
  background-repeat: no-repeat;
  background-size: contain;
  text-align: center;
}
.banner h1 {
  line-height: 80px; /* same as banner height*/
  font-size: 42px;
  color: white;
}

.logo{
  padding: 8px; /* giving a bit space */
  background-color: wheat;
  text-align: center;
}

＆＃13;

<div class="banner">
  <h1>Let's Move Together</h1>
</div>

<div class="logo">
    <img src="http://placehold.it/160x80/"/>
</div>
<div class="other">
    <h1>asdadadas</h1>
    <h1>asdadadas</h1>
    <h1>asdadadas</h1>
    <h1>asdadadas</h1>
    <h1>asdadadas</h1>
    <h1>asdadadas</h1>
    <h1>asdadadas</h1>
    <h1>asdadadasaa</h1>
</div>

＆＃13;

其他div的相对和绝对创建问题

2 个答案: