相対位置指定複数のDivs同クラス

Question

同じクラスの複数のDivが互いに垂直に積み重なっている場合。どのように相対的な位置を設定し、200pxと言うように上端をオフセットすると、最初のdivを200pxだけ動かします。 （同じクラスの下にある）のdivの残りの部分は「質問」クラスのすべてのdivのマージンが尊重さ200pxの

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

によって押し下げなく、200pxのでオフセット位置にのみに適用されますいけません質問クラスと最初のdiv。どうして？

Answer 1

私はここに少し誤解があると思います。実際には、すべてのdivは200ピクセルでオフセットされていますが、questionクラスの他の開発者との相対位置ではなく、元の位置に対してオフセットされています。

このように考えてみましょう：あなたは内部に2つのquestion divを持つコンテナを持っています。これらの最初の1つは、コンテナの上部の200ピクセル下に配置されます。 2番目は200px以下の位置に配置され、最初のquestion divの直下に配置され、200px以下の位置に配置されます（そうでない場合は、元の位置よりも400pxを下回ります）。

ここでは、私が何を意味するかを見るために例を挙げました。 3番目のdivが元の位置にまだ残っていたことに注目してください。マージンについては

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

- それは離れて、それは要素と必ずしも独自の開始位置からの相対ではない兄弟に対する相対できるように、前にいた何からのdivをプッシュしているため、これは異なって見えます。