CSS 绝对位置 Div 与 P

Question

我遇到了嵌套 p 标签的绝对位置问题。 This JSFiddle证明了差异。基于 this question 上的描述而user1334007的评论绝对定位是相对于第一个父级的。尽管w3schools没有说明， div 标签似乎就是这种情况。对于 p 标签，似乎 absolute 是相对于页面的，正如 Michael Zaporozhets 在 SO 答案和 w3school 中描述的那样。

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

jsFiddle 中的代码链接(需要有代码才能提交 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 标签。