Was bewirkt, dass mein Bootstrap-Col einen großen oberen Rand am mittleren Breakpoint hat?

Question

Siehe fiedle hier: https://jsfiddle.net/ged47t3u/1/

Dies kann ein position: absolute; Problem sein.

Ich habe eine 'Col-MD-8' mit 2 Elementen. Der erste befindet sich auf dem zweiten und hat die Position: absolut und z-Index angewendet. Das zweite Element hat einen großen Rand oben. Der gewünschte Effekt ist das erste Element mehr als die Hälfte des zweiten Elements sitzt, siehe Bild:

Dies funktioniert gut, bis die Bildschirmgröße Stiefel Medium Bruchstelle @media (max-width: 992px) erreicht. An diesem Punkt wird das rote Element in das Grün gedrückt.

Ich kann keine CSS-Änderungen an den Elementen in Inspektor sehen. Das hat mich ratlos gemacht. Ich kann einen negativen Wert an diesem Haltepunkt anwenden, aber es scheint nicht richtig.

Würde jemand wissen, was hier los ist?

Answer 1

Sieht aus wie das Verhalten dieses Bootstrap Stil verursacht:

@media (min-width: 992px) 
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 { 
    float: left; 
} 

Ich vermute, den float Wert das Element verursacht mit dem .content Elemente Marge kollabieren. Wenn der Float entfernt wird, ist der Margin-Kollaps verschwunden.

Von Mastering margin collapsing der MDN:

Eltern und erste/letzte Kind Wenn es keine Grenze, Polsterung, Inline-Inhalt ist, oder Spiel den margin-top eines Blocks von der margin-top ihrer Trennung erster untergeordneter Block oder kein Rahmen, Füllung, Inline-Inhalt, Höhe, minimale Höhe oder maximale Höhe, um den unteren Rand eines Blocks vom unteren Rand des letzten untergeordneten Elements zu trennen, dann werden diese Ränder reduziert. Der reduzierte Rand endet außerhalb des übergeordneten Elements.

Answer 2

Haben Sie versucht, position:absolute; in .content wie der folgende Code hinzuzufügen?

.content { 
width: 100%; 
background-color: green; 
height: 300px; 
margin-top: 110px; 
position:absolute; // this 
}