<分区>
标签 css css-position
我是一名新的网页设计师，所以我决定分析其他 HTML、CSS 代码。我发现了一件奇怪的事。为什么一些开发者应该使用 position: relative 而没有任何 top,left,right,bottom？
这里面有什么hack或trick吗？
像这样:
.main {
position: relative;
margin: 0;
overflow-x: hidden;
}
最佳答案
Position relative 很有用，因为设置了位置的元素(不是static)可用于在其中定位其他元素。因为relative维护的是页面流向的东西，所以不需要设置top, left, right或 bottom 值。例如，如果你想使用 absolute 定位 inside a box，你给外框 position: relative。这意味着 inside 中的任何元素都将从相对外框的左上角开始定位。如果父元素没有设置(或继承)定位，它将自己定位到 viewport 而不是盒子。因此，未包装在 relative 包装器中的元素将根据页面定位自身，而 relative 包装器意味着它将相对于定位包装器。
这就是黑客攻击，这就是为什么您会经常看到它的原因。 简而言之:“相对”使该元素保持在流中，而具有其他定位的子级现在将相对于该元素定位。
h1 { width: 100%; }
#relative { position: relative; width: 100%; }
.position { position: absolute; top: 20px; left: 20px; border: 1px solid #000;}<h1>Example:</h1>
<div id="absolute" class="position">Position based on page</div>
<div id="relative"><div class="position">Position based on box</div></div>关于css - 相对位置的CSS技巧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29889160/