CSS 相对(相对于什么？)位置

Question

我正在制作一个网站，它只有几行，我只是制作它的结构以查看它的外观，直到现在我认为我理解了 CSS 中“相对”位置的含义。这是我的 HTML 和 CSS 代码。如果你看一下 CSS，你会在 #about div

中看到

position: relative;
top: 13%;

在#portfolio

position: relative;
top: 0;

但它不在 #wrap div 之上。如果我将其位置更改为 absolute 它将位于顶部。所以我的问题是:#portfolio div 与什么有关？我认为它应该相对于 wrap 我认为它应该相对于 wrap 改变其顶部位置。(对于这篇文章的格式很抱歉，如果你愿意将它格式化得更好，那就太棒了，我试过了，但它太可怕了)

Link to HTML and CSS

Answer 1

position: relative; 使元素相对于它应该的位置定位，如果您没有指定该选项。该元素仍然占据与它应该有的相同的“空间”，但可以移动。这与将它定位在其父级中没有任何关系。

例如:

position: relative;
top: 5px;

将导致元素从其原本应该所在的位置向下移动 5 个像素。

position: relative;
top: -5px;

会导致它从原本所在的位置向上移动 5 个像素。

另请注意，使用此选项可能会导致对象与其他对象重叠或移动到其父对象之外，具体取决于您偏移它的程度。