Fatal编程技术网
  • html/
  • Html 如何显示绝对div或固定div下面的div？

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

html css

Html 如何显示绝对div或固定div下面的div？,html,css,Html,Css,我有一个div是绝对的或固定的，第二个div是正常的。我必须显示绝对或固定div下面的内容。在代码下面，普通div显示绝对div后面的内容 是否可以强制绝对div的以下内容 正文{ 保证金：0； 填充：0； } /* .绝对的{ 背景色：红色； 填充：40px0； 宽度：100%； 位置：绝对位置； }*/ .绝对的 { 背景图像：线性渐变（rgba（0,0,0,0.4），rgba（0,0,0,0.4）），url（“https://www.w3schools.com/css/trolltung

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

是否可以强制绝对div的以下内容

正文{
保证金：0；
填充：0；
}
/*
.绝对的{
背景色：红色；
填充：40px0；
宽度：100%；
位置：绝对位置；
}*/
.绝对的
{
背景图像：线性渐变（rgba（0,0,0,0.4），rgba（0,0,0,0.4）），url（“https://www.w3schools.com/css/trolltunga.jpg");
背景重复：无重复；
背景附件：固定；
背景位置：顶部；
背景尺寸：封面；
宽度：100%；
高度：350px；
颜色：#fff！重要；
文本对齐：居中；
位置：绝对位置；
排名：0；
}


Lorem Ipsum Door Sit Amet，为精英献身。Ab Saepe Aperiam，Illum Sint。这是一项共同的事业



Lorem Ipsum Door Sit Amet，为精英献身。Ab Saepe Aperiam，Illum Sint。这是一项共同的事业
由于绝对定位元素的高度为80px，因此给它一个
top
值
0
，使其保持在窗口顶部，并将
80px
的顶部填充应用于主体。您也可以在
.B

正文{
保证金：0；
填充：80px0；
}
.绝对的{
背景色：红色；
填充：40px0；
宽度：100%；
位置：绝对位置；
排名：0；
}

Lorem Ipsum Door Sit Amet，为精英献身。Ab Saepe Aperiam，Illum Sint。这是一项共同的事业
由于绝对定位元素的高度为80px，因此给它一个
top
值
0
，使其保持在窗口顶部，并将
80px
的顶部填充应用于主体。您也可以在
.B

正文{
保证金：0；
填充：80px0；
}
.绝对的{
背景色：红色；
填充：40px0；
宽度：100%；
位置：绝对位置；
排名：0；
}

Lorem Ipsum Door Sit Amet，为精英献身。Ab Saepe Aperiam，Illum Sint。这是一项共同的事业
您可以创建一个div a作为固定或绝对包装，并将B和C放入其中：

<body>
<div class="A-absolute-Wrapper">
   <div class="B"></div>
   <div class="C"></div>
</div>
</body>
您可以创建一个div a作为固定或绝对包装，并将B和C放入其中：

<body>
<div class="A-absolute-Wrapper">
   <div class="B"></div>
   <div class="C"></div>
</div>
</body>
最干净的方法是计算.A-absolute的高度，并为.B提供足够的顶部填充：

.B {
    padding-top: 80px;
}

最干净的方法是计算.A-absolute的高度，并为.B提供足够的顶部填充：

.B {
    padding-top: 80px;
}

因为绝对定位元素超出了元素的正常流动，所以您必须为元素的父元素提供等于绝对元素高度的填充，或者为要低于绝对定位分区的元素提供等于绝对元素高度的边距。

因为绝对定位元素超出元素的正常流，因此必须为元素的父元素提供等于绝对元素高度的填充，或为元素提供等于绝对元素高度的边距，该元素位于绝对定位div的下方。

您可以在绝对div容器中添加正常div，这样您就可以实现上述设计，谢谢您的回复。我编辑了我的代码。我想了解我们为什么要添加填充。如果我的绝对div padding大于150px，我必须将normal div设置为大于300px，您可以将normal div添加到绝对div容器中，这样您就可以实现上述设计谢谢回复。我编辑了我的代码。我想了解我们为什么要添加填充。如果我的绝对div padding大于150px，我必须将正常div设置为大于300px谢谢你回复symlink先生，以防万一。A-绝对{padding:100px 0；}那么我必须设置。B{padding top:160px；}然后它将显示第二个div。我想强制第二个div。设置padding:100px 0；这意味着padding-top和padding-bottom的高度是100px，所以您希望给出.b200px的padding-top.Cool。如果我的答案对您有效，请毫不犹豫地单击复选标记；）谢谢你回复symlink先生，如果.A-绝对{padding:100px 0；}那么我必须设置.B{padding top:160px；}然后它显示第二个分区。我想强制第二个分区。设置padding:100px 0；这意味着padding-top和padding-bottom的高度是100px，所以您希望给出.b200px的padding-top.Cool。如果我的答案对您有效，请毫不犹豫地单击复选标记；）感谢您回复Michael coker先生，我想了解为什么您在body标签上添加了填充，如果是绝对div，我添加了一个图像，那么如何显示下面的内容？@NarendraVerma我在body上添加了填充，将所有正常定位元素的内容向下推80像素，为绝对定位元素腾出空间。由于您将
height:350px
添加到绝对定位元素，您将
padding top:350px
应用到
body
，绝对定位元素将位于该填充中，其余内容将显示在下面。感谢您回复Michael coker先生，我想知道为什么你在body标签上添加了padding，在绝对div的情况下，我添加了一个图像，然后如何显示下面的内容？@NarendraVerma我在body上添加了padding，将所有正常定位元素的内容向下推80像素，为绝对定位元素腾出空间。由于您向绝对定位元素添加了
height:350px
，因此将应用
padding top:350px