Question

我试图理解CSS中相对位置和绝对位置之间的区别。我已经阅读了绝对和相对的解释和定义，但我仍然发现一个特别的例子相当奇怪。有人可以解释为什么在以下示例中：这是HTML文件：

body {
  display: block;
}

.d1 {
  margin-top: 100px;
  position: relative;
  width: 100px;
  height: 100px;
  background: #815BFF;
}

.d2 {
  position: absolute;
  margin-left: 100px;
  width: 100px;
  height: 100px;
  background: #815BFF;
}

.d3 {
  position: absolute;
  margin-top: 100px;
  margin-left: 200px;
  width: 100px;
  height: 100px;
  background: #815BFF;
}

<body>
  <div class="d1">div 1</div>
  <div class="d2">div 2</div>
  <div class="d3">div 3</div>
</body>

我已在http://codepen.io/l7uci/pen/JWNrRj上发布了该示例。

如果我将任何div的位置从绝对更改为相对，为什么div本身不会改变，但是之后的所有div都将其作为参考并根据它进行更改？我期待其他div仍然相对于身体放置，如Difference between relative and absolute。

Answer 1

- 具有位置的元素：relative;相对于其正常位置定位。

设置相对定位元素的顶部，右侧，底部和左侧属性将使其远离其正常位置进行调整。其他内容不会被调整以适应元素留下的任何空白。

- 位置为绝对的元素;相对于最近定位的祖先定位（而不是相对于视口定位，如固定）。

然而;如果绝对定位元素没有定位祖先，它将使用文档正文，并随页面滚动一起移动。

Answer 2

如果使用position:absolute但不设置顶部，左侧，底部或右侧，则元素将采用它在正常流程中所具有的位置，即使它本身不在正常流程中，因此不会t影响后续元素的位置。

因此，如果您将没有顶部，左侧，底部或右侧的元素从绝对更改为相对而不移动，这仍然会将其置于正常流程中，但它现在处于正常流程中，因此后续元素将考虑到它的大小。

CSS相对于绝对位置

2 个答案: