Question

今天我在CSS中学习了2个概念，一个是CSS定位（静态，相对，绝对，固定），另一个是CSS Margin，它定义了元素之间的空间。

假设我想移动一个元素，这是最好的方法吗？因为这两个概念似乎都可以做同样的事情。一个例子可能如下：

代码（CSS定位）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Haha</title>

        <style type="text/css">
            //Using CSS positioning
            h2{position:relative;top:-80px}
        </style>
    </head>

    <body>
        <h1>hahahaha</h1>
        <h2>hehehehe</h2>
    </body>
</html>

代码（CSS保证金）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Haha</title>

        <style type="text/css">
            //Using CSS Margin
            h2{margin-top:-80px}
        </style>
    </head>

    <body>
        <h1>hahahaha</h1>
        <h2>hehehehe</h2>
    </body>
</html>

问题：

1.）正如您所看到的，上面的2个代码通过将第二个标题移动到第一个标题的顶部来做同样的事情。所以我只是想知道哪种方法实际上是安排元素的正确方法？

Answer 1

不，它们不一样，使用position: relative;将元素保留在流中，它只移动元素position但物理上它在流中保留空间，而使用margin它移动影响使用margin移动的元素周围的元素的整个元素，这也会导致在某些情况下折叠边距...

Demo（position: relative;）

Demo（margin）

CSS定位的工作原理是什么？我几分钟后才解释here

此外，margin和定位完全是两个不同的东西，定位是一个巨大的概念，其中margin完全不同，定位不会影响您的盒子模型，其中{{1} }，边距用于隔离元素，比如说margin元素，或者说你需要在段落的上方和下方留出一些空格，它们不是inline-block元素等等......

如果你看到这个

enter image description here

边距占据元素周围的区域，即如果position中的元素为50px而您使用width的{{1}}，则所有内容都需要margin所以它实际上会使你的元素总共占10px 10px，其中使用70px，它不会扩展或减少元素周围的区域，它只会改变元素的50px => width + 10px => left margin + 10px => right margin可能会或可能不会影响页面上的其他元素，具体取决于position而position会更改框模型，因此，它也会影响{{1}其他元素，例如position和margin。

此外，position未垂直应用于static元素，因此，如果您将relative应用于margin或任何其他inline元素，请说{{ 1}}，margin只能水平而不是垂直拍摄，为此，您必须使它们span 或inline级元素。

有关详细信息，请you can read my answer on another question。您可以将a应用于任何元素，无论margin，inline-block还是block，它都会position: relative;您想要的元素...... { / p>

Answer 2

       different types of css position

有四种类型的css positiong 静态的相对的绝对的 4.固定 static： - 这是每个页面元素的默认值。不同的元素对于positiong没有不同的结果。相对： - 这种定位可能是最令人困惑和误用的。绝对： - 这是一种非常强大的positiong类型，它允许您将任何页面元素按字面放置在您想要的位置。修复： - 这是positiong的类型是相当罕见但肯定有用。

Answer 3

css边距中的

是边界外的空间。它将块与其他块分开。但填充的一个很大的区别是边距不包括背景。换句话说，css positiong和css margin之间的区别是，不是它们使用位置不相同;相对;将元素保持在流中它只是移动元素位置，但物理上它保留了流中的空间。

CSS定位和CSS边距之间的区别

代码（CSS定位）：

代码（CSS保证金）：

问题：

3 个答案: