css - 当元素绝对定位时， '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>

这是我的codepen，我说的元素是h1.header。当我改变 margin-top: 20px 和 top: 20px 时，它看起来是一样的。

Answer 1

是的，特别是当绝对定位的元素不是它的 anchor 中的第一个元素时。你会注意到我唯一改变的是我添加了一个 <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>