Question

我的页面上有一个元素，我想用“position：absolute”来定位。因此，我在#pagewrap中添加了“position：relative”。我现在想对#page中的其他元素做同样的事情，但是当我还添加“position：relative”时，#pagewrap作为父级之前的所有元素现在切换到#page。

我所说的元素是：＃copyright-logo

我该怎么做才能避免这种情况？

#pagewrap {
width: 1050px;
margin: 0px auto;
background-color: rgb(255,255,255);
overflow: hidden;
-moz-border-radius: 15px;
border-radius: 15px;
position: relative;
}

#page { 
width: 960px;
margin: 0px auto;
background-color: rgb(255,255,255);
overflow: hidden;
 }

#copyright-logo {
position:absolute; bottom: 10px; right: 10px
}

Answer 1

让#copyright-logo成为#pagewrap的直接孩子，而不是#page

<div id="pagewrap">
    <div id="copyright-logo"></div>
    <div id="page"></div>
</div>

Answer 2

绝对定位的元素相对于最近的封闭定位元素定位，该元素可以是另一个绝对定位的元素，或者是固定或相对定位的元素。

CSS position property

Answer 3

你过度使用相对和绝对定位。

绝对没有必要相对定位#pagewrap，只需将其作为边距居中，如：

#pagewrap { width: 1000px; margin: 0 auto; }

在任何情况下，不要过度使用这些位置，而是使用浮点数，填充和边距。

如何使用“position：relative”管理多个div？

3 个答案: