当元素绝对定位时，'margin-top，-left，-bottom，-right'和'top，left，bottom，right'属性之间有什么区别吗？

Question

我想知道当我在元素上使用position: absolute 属性时，边距和定位属性之间是否有任何区别。

我知道一个元素相对定位的时候有很大的不同，但是当一个元素在绝对定位的时候脱离层次，好像没有什么区别。

我尝试创建几个元素、div、段落、标题并相对绝对地定位它们。然后我添加了边距和“顶部、底部等”。属性。

* {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background-color: #363636;
  color: white;
  font-family: Roboto, sans-serif;
  font-size: 20px;
  text-align: justify;
}

.wrapper {
  width: 400px;
  margin: auto;
  position: relative;
}

.wrapper>* {
/*   margin-top: 20px; */
}

.header {
  color: cyan;
  
  position: absolute;
  margin-top: 20px;
/*   top: 20px; */
}

.title {
  color: red;
  
  margin-top: 100px;
}

.lorem {
  
}

.footer {
  margin-top: 40px;
}

<div class="wrapper">
  <h1 class="header">Lorem ipsum dolor sit amet.</h1>
  <h2 class="title">Lorem, ipsum dolor.</h2>
  <p class="lorem">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente ab, cum, doloremque ratione quas officia placeat adipisci saepe hic similique perferendis voluptates molestiae ea id eius atque ipsum assumenda. Reprehenderit ullam nobis quis mollitia ab, nam eveniet ipsum in. Impedit ipsum odit quae facere! Voluptate illum, temporibus quasi natus repudiandae atque cupiditate laboriosam aliquam nostrum doloribus iste quibusdam commodi harum, earum ea doloremque! Eum temporibus commodi eaque aliquid ullam quod eius, praesentium dolores dicta! Aut eligendi repudiandae qui doloremque, id odit, nulla commodi quod quia molestiae blanditiis cum exercitationem atque eum maiores dolore quas rerum, laborum doloribus? Necessitatibus, facilis inventore.
  </p>
  <div class="footer">
    <p class="info">E-mail address</p>
    <p class="location">America</p>
  </div>
</div>

这是我的代码笔，我正在谈论的元素是 h1.header。当我更改 margin-top: 20px 和 top: 20px 时，它似乎相同。

Answer 1

是的，尤其是当绝对定位的项目不是其锚点中的第一个项目时。你会注意到我唯一改变的是我在其中添加了一个<p>Some text</p>，现在margin-top 和top 之前的行为不那么相似了。

可能还有其他不同的规则。在某些情况下，利润会崩溃。顶部永远不会“崩溃”。

* {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background-color: #363636;
  color: white;
  font-family: Roboto, sans-serif;
  font-size: 20px;
  text-align: justify;
}

.wrapper {
  width: 400px;
  margin: auto;
  position: relative;
}

.wrapper>* {
/*   margin-top: 20px; */
}

.header {
  color: cyan;
  
  position: absolute;
  margin-top: 20px;
/*   top: 20px; */
}

.title {
  color: red;
  
  margin-top: 100px;
}

.lorem {
  
}

.footer {
  margin-top: 40px;
}

<div class="wrapper">
  <p>Some text</p>
  <h1 class="header">Lorem ipsum dolor sit amet.</h1>
  <h2 class="title">Lorem, ipsum dolor.</h2>
  <p class="lorem">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente ab, cum, doloremque ratione quas officia placeat adipisci saepe hic similique perferendis voluptates molestiae ea id eius atque ipsum assumenda. Reprehenderit ullam nobis quis mollitia ab, nam eveniet ipsum in. Impedit ipsum odit quae facere! Voluptate illum, temporibus quasi natus repudiandae atque cupiditate laboriosam aliquam nostrum doloribus iste quibusdam commodi harum, earum ea doloremque! Eum temporibus commodi eaque aliquid ullam quod eius, praesentium dolores dicta! Aut eligendi repudiandae qui doloremque, id odit, nulla commodi quod quia molestiae blanditiis cum exercitationem atque eum maiores dolore quas rerum, laborum doloribus? Necessitatibus, facilis inventore.
  </p>
  <div class="footer">
    <p class="info">E-mail address</p>
    <p class="location">America</p>
  </div>
</div>

Answer 2

是的，存在与 静态位置相关的差异。下面是一个简单的例子来说明：

.box {
  position: relative;
  border: 2px solid green;
  width: 200px;
  position: relative;
  display: inline-block;
}

.box>div {
  height: 50px;
  width: 50px;
  background: red;
}

<div class="box">
  <h1>I am static</h1>
  <div></div>
</div>

<div class="box">
  <h1>I am static</h1>
  <div style="position:absolute;margin-top:20px;"></div>
</div>

<div class="box">
  <h1>I am static</h1>
  <div style="position:absolute;top:20px;"></div>
</div>

请注意，在第一个示例中，元素从其初始位置（我们称为静态位置）移动了20px，而在第二个示例中，它从顶部移动了20px的父元素（包含块）。

来自the specification：

就本节和下节而言，术语“静态位置”（元素的）大致是指元素在正常流程中的位置。更准确地说，'top' 的静态位置是从包含块的顶部边缘到假设框的顶部边缘边缘的距离，如果其指定的 'position' 值为 ' static'，其指定的 'float' 为 'none'，其指定的 'clear' 为 'none'...

那么我们有：

对于绝对定位的元素，垂直尺寸的使用值必须满足这个约束：

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block

那么第一种情况会如下：

如果 'top'、'height' 和 'bottom' 这三个都是自动的，请将 'top' 设置为静态位置并应用下面的第三条规则。

第二个将跟随这个：

'bottom' 是 'auto'，'top' 和 'height' 不是 'auto'，然后将 'margin-top' 和 'margin-bottom' 的 'auto' 值设置为 0 并求解 'bottom'

如果在设置top:0 时静态位置 相同，则两者的行为相同。基本上，当元素是其包含块中的第一个时

.box {
  position: relative;
  border: 2px solid green;
  width: 200px;
  position: relative;
  display: inline-block;
  vertical-align:top;
}

.box>div {
  height: 50px;
  width: 50px;
  background: red;
}

<div class="box">
  <div></div>
  <h1>I am static</h1>
</div>

<div class="box">
  <div style="position:absolute;margin-top:20px;"></div>
  <h1>I am static</h1>
</div>

<div class="box">
  <div style="position:absolute;top:20px;"></div>
  <h1>I am static</h1>
</div>

值得注意的是，您可以将两者结合起来。您只需要应用规范中所述的正确规则。

---

同样的逻辑适用于margin-left/right 和left/right