在使用position:absolute(或最佳替代)之后是否可以破坏文档流?

时间:2014-05-26 07:31:10

标签: html css

我一直在努力想出一个以div为中心的好解决方案。我不喜欢凌乱的HTML,我不喜欢有2或3个不必要的div只是为了集中某些东西。所以我决定使用position:absolute。

现在我知道这个位置:绝对打破了文档的流程,这就是为什么会发生这种情况,但有没有办法“破坏”文档的流程?

现在,我有一个100%宽度,20%高度和垂直居中的div。这个div包含一个段落,我在页面底部有另一个段落元素(在这个div之外) - 但因为我使用的是position:absolute,版权声明在 div之前出现

有没有办法让我们的文件恢复正常流程。我不想不得不将margin-top: npx;设置为显示在div之后的页面上的每个元素。


JSFiddle

HTML:

<div id="container">
    <p>Hi lol</p>
</div>
<p>Copyright Notice here</p>

CSS:

*
{
    outline: none; outline: 0; border: none; border: 0; margin: 0; padding: 0;
}

#container
{
    width: 100%;
    height: 20%;

    position: absolute;
    left: 0%;
    right: 0%;
    top: 40%;
    bottom: 40%;

    background-color: khaki;
}

p
{
    text-align: center;
}

1 个答案:

答案 0 :(得分:1)

还将您的版权段落设置为绝对底部。

p { position: absolute; bottom: 0px; /* or any appropriate position */ }