Question

我有一个网站，在背景图片上显示一些传情文本和一个按钮。

grosso modo：

<div class="background">
<div class="teaser">
Teaser text
</div>
</div>

为了使网站响应，这个预告文本和按钮应该显示在div下面而不是顶部，因为图像使得难以在较小的打印上阅读。如何让这个嵌套的div显示在下面？我尝试使用position：relative但是它不会占用div下方的空间，重叠其他内容。

Answer 1

您说您已尝试过position: relative ...您是否在嵌套div上尝试了position: absolute？

＆＃13;

.background {
  background-image: url(http://s3.india.com/wp-content/uploads/2015/07/species1.jpg);
  background-size: cover;
  height: 400px;
  width: 600px;
  position: relative;
  margin-bottom: 20px;
}
.teaser {
  position: absolute;
  bottom: -20px;
}

＆＃13;

<div class="background">
  <div class="teaser">
    Teaser text
  </div>
</div>
<div>
  More content outside of teaser.
</div>

＆＃13;

teaser与position: absolute父亲（position: relative）.background为-20px。我的位置：来自background底部的background，并在teaser的底部添加了20px的保证金作为补偿，因此"SELECT Date FROM Calendar WHERE SupplierName= "+ Request.QueryString["SupplierName"] + "AND Date = @firstDate AND Date < @lastDate";不会与其他内容重叠。

pure css：在其父级下弹出一个嵌套的div

1 个答案: