css - 相对定位多个div同一个类

Question

当您有多个具有相同类别的 Div 并垂直堆叠在一起时。为什么将位置设置为相对并偏移顶部说 200px 只会将第一个 div 向下移动 200px。其余的 div(属于同一类)不会被向下推 200px

.question {
  margin: 120px auto;
  text-align: center;
  position: relative;
  top: 200px;
}

“问题”类中所有 div 的边距都得到尊重，但偏移 200 像素的位置仅适用于问题类的第一个 div。为什么？

Answer 1

我认为这里有一点误会。事实上，所有的 div 都偏移了 200px，但它们是相对于它们的原始位置偏移的，而不是相对于具有 question 类的其他开发者。

这样想:你有一个容器，里面有两个 question div。其中第一个位于容器顶部下方 200 像素处。第二个位于它通常放置的位置下方 200px，这将位于第一个 question div 的正下方，而不是低于该 div 200px(否则它总共将比其原始位置低 >400px ).

我在这里举了一个例子，让你明白我的意思。请注意，第三个 div 仍位于其原始位置。

https://jsfiddle.net/u0sxtgz6/1/

至于边距 - 这看起来有所不同，因为它将 div 推离之前的任何位置，因此它可以相对于同级元素，而不必相对于它自己的起始位置。