css 相对位置区别于绝对位置

Question

我在使用相对位置时遇到了问题。 css 中的以下代码：

#background
{
    background-color: gray;
    position: absolute;
    left: 100px;
    top: 100px;
    width: 500px;
    height: 500px;
}

#p1 
{
    position: relative;
    left: 100px;
    top: 100px;
    width: 10px;
    height: 10px;
    background-color: green;
}

在我看来，背景和p1的左上角应该是偶数。但事实并非如此。我会说它被推到右边和底部大约 +50px。这个问题怎么来的，怎么解决的？

Answer 1

position:absolute 表示它是根据祖先的 top-left 角定位的，它可以是具有位置规范的 parent，也可以是 <body>元素本身，如果没有的话。然而，position:relative 意味着它是根据它通常在没有被重新定位的情况下所处的位置定位的（即，正常位置 + 偏移量）。如果您的代码类似于：

<div id="background"><div id="p1">...</div></div>

那么这意味着 background 应该位于 top-left 角（加上偏移量），但是 p1 应该在角下方和右侧 100 像素处其中 parent、background.

编辑：修正了关于两个位置的定义。

css 相对位置区别于绝对位置

css position relative differentiates from absolute

css

css-position