我正在制作一个网站，它只有几行，我只是制作了它的结构，看看它的样子，直到现在我还以为我理解CSS中的“相对”位置是什么意思。 这是我的HTML和CSS代码。如果您看一下CSS，您会在 #about div
中看到position: relative;
top: 13%;
在 #portfolio
中position: relative;
top: 0;
但它不在 #wrap div 之上。如果我将其位置更改为绝对，它将位于顶部。所以我的问题是：#portfolio div是相对于什么的？我认为它应该是相对于我认为它应该是相对于包装更改它的顶部位置。 （对不起关于这篇文章的格式化，如果你会很好地格式化它会更好，它会很棒，我试过但它太可怕了）
答案 0 :(得分：6)
position: relative;会使项目相对于 的位置。该项目仍然占用与其相同的“空间”，但可以移动。这与将其定位在其父级中没有任何关系。
例如：
position: relative;
top: 5px;
将项目从 的位置向下移动5个像素。
position: relative;
top: -5px;
会使它从原来的位置向上移动5个像素。
另请注意，可以通过使用此对象使对象与其他对象重叠或移动到其父对象之外，具体取决于您将其偏移多少。
答案 1 :(得分：0)
相对定位元素相对于其正常位置定位。
所以，如果您有这样的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，它将包含绝对定位的元素。
答案 2 :(得分：0)
css属性position:relative通常在流中定位元素，然后添加top, left, right和bottom的值。
在您的情况下，使用#about定位#portfolio和position:relative;。
#about占#wrap的23％，因此#portfolio的顶部的初始位置为#wrap的23％。
然后，您使用#about更改top:13%位置，使其降至13％，但您为top:0;设置#portfolio，因此保持在23％。< / p>
如果您希望将div放在#wrap内，则需要设置position:absolute;。然后，它们将相对于最近的祖先（此处为#content）或包含的块进行定位。
答案 3 :(得分：-1)
投资组合与“内容”相关，这意味着您在“内容”div中添加的所有内容都将继承其内容。