Question

我对CSS定位的理解已经有一段时间了，指定了position:absolute和left，top，right或bottom的元素如果没有这样的祖先元素，则使用相对于具有position:relative或相对于文档的最近祖先元素的那些数字。

在创建一个测试脚本来向某人解释CSS定位时，我发现了对我来说非常尴尬的行为。您可以看到@ http://jsbin.com/axocUCo/1/edit?html,output，.child为position:absolute，父亲.parent没有定位，父亲.grand_parent有position:relative 1}}。我已将.child设置为left:0和top:0。但是孩子被安置在.parent而不是.grand_parent。为什么会这样？

我对CSS定位的理解是否存在缺陷？或者，我在做些傻事吗？

Answer 1

您的理解是正确的，并且样本中的行为相同。它的边距和百分比宽度和高度使其显示为相对于父级而非祖父级的位置。

您可以尝试在此处设置右侧和底部属性，并清楚地看到差异。

  #absolute_relative .child{
        position: absolute;
        width: 25%;
        height: 25%;
        right: 0px;
        bottom: 0px;
    }

这里还有一个小提琴，清楚地表明了这种行为：Fiddle

Answer 2

您的understanding is actually right并且它正在按预期工作，因为您在css中存在级联问题。这个孩子是<div>，因此在`for divs中定义了样式，包括边距。尝试将此添加到孩子：

 #absolute_relative .child {
   margin: 0;
   }

注意：这似乎是一种奇怪的行为，因为孩子和父母都有相同的边缘，因此看起来孩子是相对于父母，但事实并非如此。

Proof of concept: http://jsbin.com/eKOnOJO/1/

绝对位置的元素相对于未定位的父元素放置

2 个答案: