Relative Positionierung mehrerer Divs Gleiche Klasse

Question

Wenn Sie mehrere Divs mit derselben Klasse haben, die vertikal aufeinander gestapelt sind. Wie kommt es, wenn man die Position auf relativ setzt und die Spitze versetzt, um nur 200px zu sagen, verschiebt man die erste div um 200px. Der Rest der divs (die unter der gleichen Klasse) sind derzeit durch 200px

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

nach unten gedrückt bekommen

Die Margen auf allen divs in der „Frage“ Klasse respektiert werden, aber die von 200px Offset-Position gilt nur für die erstes div mit der Frageklasse. Warum?

Answer 1

Ich denke, hier ist ein kleines Missverständnis. Tatsächlich sind alle divs um 200px versetzt, aber sie sind relativ zu ihrer ursprünglichen Position versetzt, nicht relativ zu den anderen Entwicklern mit der question Klasse.

Denken Sie darüber nach: Sie haben einen Container mit zwei question Divs innen. Der erste davon befindet sich 200px unter der Oberseite des Containers. Die zweite Position liegt 200px unterhalb der Stelle, an der sie normalerweise positioniert worden wäre. Sie wäre genau unter der ersten dund nicht 200px darunter (sonst wäre sie insgesamt> 400px unter ihrer ursprünglichen Position).

Ich machte hier ein Beispiel, für Sie zu sehen, was ich meine. Beachten Sie, dass das dritte Div immer noch dort ist, wo es an seiner ursprünglichen Position gewesen wäre.

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

Was die Marge - das sieht anders aus, weil es die div wegdrückt aus, was vorher war, so kann es relativ sein Elemente, die Geschwister und ist nicht notwendigerweise in Bezug auf seine eigene Ausgangsposition.