Question

我有以下HTML ...

<div class="maincontent">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at metus nisi. Sed blandit, nunc eget ornare porta, lorem est cursus eros, in ultricies enim mi eget leo. Integer a odio at neque lobortis fermentum ac at purus. Vivamus faucibus nec tortor at sagittis. Nam lectus metus, scelerisque vehicula orci ac, lacinia elementum lorem. Nam efficitur mauris quis tortor efficitur, vitae viverra metus semper. Nunc id euismod purus.

<div class="container">
  <div class="box1">
    Box 1 Content
  </div>
  <div class="box2">
    Box 2 Content
  </div>
  <div class="box3">
    Box 3 Content
  </div>
</div>

</div>

<footer>
  This is the footer
</footer>

.container{position:relative;}
.box1{position:absolute;top:0;background:red;color:white;}
.box2{position:absolute;top:20px;background:green;color:white}
.box3{position:absolute;top:40px;background:blue;color:white;}

https://jsfiddle.net/25w7cxv1/

由于某种原因，页脚没有正确显示，并且与其他内容重叠。我做错了什么？

Answer 1

通过给每个.box一个position:absolute，您将它们从文档流中取出，然后将它们与定位的父项（或祖先）进行绝对比较。

<footer>仍然在文档流程中，因此会直接显示在.maincontent中的文本之后。

在这里，我删除了position:absolute，以便框内嵌在文档中：

.container{position:relative;}
.box1{background:red;color:white;}
.box2{background:green;color:white}
.box3{background:blue;color:white;}

在这里，我给了一个display: table的属性框，以便它们只有它们的内容一样宽：

.box1, .box2, .box3 {display: table;}

我认为这是你想要实现的目标。

小提琴：https://jsfiddle.net/gmncpn82/

绝对定位内容重叠页脚

1 个答案: