Question

我是一名新的网页设计师，所以我决定分析其他 HTML，CSS 代码。我发现了一件奇怪的事。为什么有些开发人员使用 位置：相对 而没有任何顶部，左侧，右侧，底部？

是否有任何黑客或诡计？

喜欢这样：

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

Answer 1

位置relative非常有用，因为位置设置的元素（不是static）可以用来定位其中的其他元素。由于relative维护页面流中的内容，因此无需设置top，left，right或bottom值。例如，如果您想在框中使用absolute定位，则会给外框position: relative。这意味着里面的任何元素它将从相对外框的左上角进行定位。如果父元素没有定位集（或继承），它将自己定位到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 2

因为relative意味着.main继承自父节点的属性。所以它将具有与他父亲相同的属性。

Answer 3

它的真正含义是＆＃34;相对于自身＆＃34;。如果你在一个元素上设置position: relative;但没有其他定位属性（顶部，左边，底部或右边），它对它的定位没有任何影响，它将完全如你所做的那样把它留作位置：静态;

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

Answer 4

Setting an HTML element to be position: relative; without any pixel-specific direction rules allows you to control the z-axis of the element, making it possible to control the layering of elements on your web page.

位置相对css技巧

4 个答案:

快速示例