Question

我有一个绝对或固定的div，第二个div是正常的。我必须显示绝对或固定div以下的内容。在代码下面，Normal div显示绝对div的内容背面。

是否可以强制低于绝对div的内容？

＆＃13;

body {
  margin: 0;
  padding: 0;
}
/*
.A-absolute {
  background-color: red;
  padding: 40px 0;
  width: 100%;
  position: absolute;
}*/
	.A-absolute
		{
		background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url("https://www.w3schools.com/css/trolltunga.jpg");
background-repeat:no-repeat;
background-attachment: fixed;
background-position: top;
background-size: cover;
width: 100%;
height: 350px;
color: #fff !important;
text-align: center;
position: absolute;
top: 0;
		}

＆＃13;

<div class="A-absolute">
</div>

<div class="B">
  <p>
    Lorem Ipsum Dolor Sit Amet, Consectetur Adipisicing Elit Adipisicing . Ab Saepe Aperiam, Illum Sint. Nisi, Eligendi Reruat Officiis Consectetur Assunda Commodi
  </p>
</div>



<div class="c">
  <p>
    Lorem Ipsum Dolor Sit Amet, Consectetur Adipisicing Elit Adipisicing . Ab Saepe Aperiam, Illum Sint. Nisi, Eligendi Reruat Officiis Consectetur Assunda Commodi
  </p>
</div>

＆＃13;

Answer 1

最干净的方法是计算.A-absolute的高度，然后给.B多个顶部填充：

.B {
    padding-top: 80px;
}

https://jsfiddle.net/mqajyyrv/1/

Answer 2

由于绝对定位的元素高度为80px，因此top值为0，因此它将保留在窗口的顶部，并将80px的顶部填充应用于正文。您还可以在margin-top: 80px

上使用.B

  body {
    margin: 0;
    padding: 80px 0 0;
  }
  .A-absolute {
    background-color: red;
    padding: 40px 0;
    width: 100%;
    position: absolute;
    top: 0;
  }

  <div class="A-absolute">
  </div>

  <div class="B">
  	<p>Lorem Ipsum Dolor Sit Amet, Consectetur Adipisicing Elit Adipisicing . Ab Saepe Aperiam, Illum Sint. Nisi, Eligendi Reruat Officiis Consectetur Assunda Commodi</p>
  </div>

Answer 3

您可以创建div A作为固定或绝对的包装，并将B和C放在其中：

[ "prop1\n prop2\n prop3", "prop1\n prop2\n prop3", "prop1\n prop2\n prop3"]

Answer 4

由于绝对定位元素超出了正常的元素流，因此您必须将填充等于绝对元素的高度添加到元素的父元素或者余量等于绝对元素的高度到您的元素想要在绝对定位的div下面。

如何在绝对或固定div下面显示div？

4 个答案: