Question

我理解通过将父div设置为position:relative，如果我将子项的位置设为绝对，则子项的位置将是父项中的绝对位置。如果我想让孙子绝对定位于孩子，我该怎么做，因为孩子已经设置为position:absolute？对不起，如果这个问题很奇怪，感谢任何帮助。

HTML：

<div id="parent">
<div id="child">
<div id="grandchild"></div>
</div>
</div>
</div>

CSS：

#parent{
position:relative;
}
#child{
position:absolute;
}
#grandchild{
}

Answer 1

为什么你需要在孩子身上放另一个div？只是绝对定位一个并使用z-index来分层

Answer 2

绝对位置元素相对于它的父元素定位（除非父级的位置设置为静态，但不是你的情况），然后：

#grandchild{
    position: absolute;
}

会将孙子的位置设置为相对于孩子的绝对位置 - 正如您所希望的那样？

Answer 3

如果你想操纵更多，这很容易。我给你做了一个定位的例子。

这是jsfiddle示例： http://jsfiddle.net/Be84P/1/

#parent{
position:relative;
height:200px;
background: blue;
}
#child{
position:absolute;
top: 20;
width:20px;
height:100px;
background: red;
}
#grandchild{
position:absolute;
bottom:0;
height: 50px;
background: yellow;
}

Answer 4

在嵌套元素中可以有多个'position：absolute;'，而不考虑父元素的位置。每次使用绝对值时，都会将div设置为相对于其父元素的维度。父元素可以是相对的，绝对的或固定的（除了静态之外的任何东西），它不应该影响它的子节点。

我之所以提到这一点，是因为你没有错误地认为#parent的相对位置对#child的绝对定位有任何影响，而#grandchild元素可以定位为绝对OR相对，请记住您将它定位到#child的维度，并引用它的直接父级。

简短的回答，设置#grandchild {position：absolute;}，它会正常工作。

Answer 5

我认为你的工作类型确实不同，但分层或制作清单可能有所帮助。 CSS中的z-index:或HTML中的有序列表

。

CSS在父母和子女中的绝对定位

5 个答案: