InQusitive InQusitive - 1 year ago 68
CSS Question

Why do static elements move?

If static positioned elements are not affected by the top, bottom, left, and right properties, why does the box move along with the container when I change the margin-top value of the box element?

I have kept my code at:


<div class="container">
<div class="box">


height: 500px;
background-color: grey;
margin-top: 00px;

height: 100px;
background-color: orange;
margin-top: 100px;


Answer Source

The margins are collapsed in the jsfiddle you posted:

Add overflow: auto/hidden to .container or use the following css which I've added in a class called .no-collapse myself:

padding-top: 0.01px;
margin-top: -0.01px;