相对位置 css 技巧

Question

我是一名新的网页设计师，所以我决定分析其他 HTML、CSS 代码。我发现了一件奇怪的事。为什么有些开发人员要使用 position: relative 而没有任何 top,left,right,bottom?

有没有什么技巧？

像这样：

.main {
            position: relative;
            margin: 0;
            overflow-x: hidden;
        }

Answer 1

因为相对意味着.main 继承自其父节点的属性。所以它会拥有和他父亲一样的属性。

Answer 2

Position relative 很有用，因为设置了位置的元素（不是 static）可用于在其中定位其他元素。因为 relative 维护页面流中的东西，所以不需要设置 top、left、right 或 bottom 值。例如，如果你想使用 absolute 定位 inside a box，你给外框 position: relative。这意味着 inside 中的任何元素都将从相对外框的左上角开始定位。如果父元素没有定位设置（或继承），它会将自己定位到 viewport 而不是盒子。因此，未包装在 relative 包装器中的元素将根据页面定位自身，而 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>

Answer 3

真正的意思是"relative to itself"。如果你在一个元素上设置 position: relative; 但没有其他定位属性（顶部、左侧、底部或右侧），它根本不会影响它的定位，它将与你将它保留为位置完全一样: 静态;

但是如果你给它一些其他定位属性，比如 top: 10px;，它会将它的位置从正常位置向下移动 10 像素。

Answer 4

将 HTML 元素设置为 position: relative; 且没有任何特定于像素的方向规则允许您控制元素的 z 轴，从而可以控制您的元素的分层网页。

相对位置 css 技巧

position relative css tricks

css

css-position

快速示例