Question

我遇到了一个带有嵌套p标记的绝对位置问题。 This JSFiddle证明了这一点。根据{{3}}的描述和user1334007的评论，绝对定位是相对于第一个父母的。即使this question没有说明，但div标签似乎也是如此。对于p标签，似乎绝对是相对于页面的，正如Michael Zaporozhets在SO答案和W3school所描述的那样。

考虑到所有这些链接，我是否在某个地方犯了我的风格错误，或者这些风格是不同的？如果他们的表现有所不同，有人可以解释为什么会出现这种情况吗？我要问的主要原因是这是70-480认证测试中的一个问题，即使我知道答案说的是正确的，我希望能够充满信心地使用定位。

w3schools链接中的代码（需要提交代码以提交jsfiddle链接，所以我只需将其全部放入）

<h2>Paragraph Position</h2>
<p class="outer">Hello Outer
    <p class="inner">Hello Inner</p>
</p>
<br/>

<h2>Division Position</h2>
<div class="outer">Hello Outer
    <div class="inner">Hello Inner</div>
</div>

.outer {
    position: relative;
    background-color: red;
    height: 100px;
    width: 500px;
}

.inner {

    position: absolute;
    top: 15px;
    left: 15px;
    background-color: green;
}

Answer 1

如果您查看HTML（我使用Chrome Inspector查看），您会发现p.inner实际上并不在p.outer内。因此，相对于具有p.inner定位的第一个父元素或relative标记（在本例中为html标记），html将绝对定位。

编辑：我也查看了Firefox，似乎这些浏览器会将嵌套的p标记转换为单独的p标记。因此，另一个p代码中的p代码会生成三个同级p代码。

CSS Absolute Position Div与P.

1 个答案: