我正在制作一个网站，它只有几行，我只是制作了它的结构以查看它的外观，直到现在我以为我理解 CSS 中“相对”位置的含义。这是我的 HTML 和 CSS 代码。如果你看一下 CSS，你会在#about div中看到
position: relative;
top: 13%;
在#portfolio
position: relative;
top: 0;
但它不在#wrap div之上。如果我将其位置更改为绝对位置，它将位于顶部。所以我的问题是：#portfolio div 与什么相关？我认为它应该相对于 wrap 我认为它应该相对于 wrap 改变它的顶部位置。（很抱歉这篇文章的格式，如果你能更好地格式化它，那就太好了，我试过了，但太可怕了）
position: relative;如果您没有指定该选项，则会导致项目相对于它所在的位置定位。该项目仍然占用与它本来一样的“空间”，但可以移动。这与将其定位在其父级中没有任何关系。
例如：
position: relative;
top: 5px;
将导致该项目从原来的位置向下移动 5 个像素。
position: relative;
top: -5px;
会导致它从原本的位置向上移动 5 个像素。
另请注意，使用它可能导致对象与其他对象重叠或移动到其父对象之外，具体取决于您偏移它的程度。
相对定位的元素是相对于其正常位置定位的。
因此，如果您有这样的 HTML：
<div style="height: 30px; padding: 0px; margin 0px;">Content</div>
<div style="height: 30px; padding: 0px; margin 0px; position:relative; top: -30px">Overlapping Content</div>
第二个 div 将使第一个 div 黯然失色，因为它将从通常定位的位置向上移动 30 px。
老实说，在大多数网页设计中，相对定位很少与实际的上/下/左/右值一起使用。大多数position: relative仅在包含绝对定位元素的容器元素上使用。
css 属性position:relative在流中正常定位元素，然后添加 和 的top, left, right值bottom。
请参阅MDN 上的 CSS 位置。
在您的情况下，#about并且#portfolio使用position:relative;.
#about占据 的 23% #wrap，因此顶部的#portfolio初始位置将位于 的 23% #wrap。
然后，你改变#about位置，top:13%所以它下降到 13%，但你设置top:0;为#portfolio，所以它保持在 23%。
如果你想让你的 div 定位在里面#wrap，你需要设置position:absolute;. 然后，它们将相对于它们最近的定位祖先（此处#content）或包含块进行定位。
投资组合与“内容”相关，这意味着您放入“内容” div 的所有内容都将继承他的功能。