css中margin为负值的情况。

margin为负值会导致元素产生偏移。
文档流中的元素设置margin-bottom为负值之后，会让后面的元素向上流动填充margin的空间。

三个例子说明：
1.


    <div style="height: 400px;margin-top: 50px;position: relative;border-bottom: 1px solid rgba(0,0,0,0);overflow: hidden;">

        <div style="height: 200px;width: 100%;position: relative;background-color: rebeccapurple;margin:  0 0 -100px 0;">

        </div>
        <div style="height: 200px;background-color: peru">

        </div>
    </div>

第二个子元素向上流动，填充了margin的部分，但是因为relative在z轴上的优先级更高，所以被覆盖掉了一部分。
效果:
在这里插入图片描述
2.

  <div style="height: 400px;margin-top: 50px;position: relative;border-bottom: 1px solid rgba(0,0,0,0);overflow: hidden;">

        <div style="height: 200px;width: 100%;position: relative;background-color: rebeccapurple;margin:  0 0 -100px 0;">

        </div>
        <div style="height: 200px;background-color: peru;position: relative;">

        </div>
    </div>

两个子元素都为绝对定位，第二个子元素向上偏移，第二个子元素z轴上优先级更高，所以第一个子元素被覆盖掉一部分。
效果：
在这里插入图片描述
3.

    <div style="height: 400px;margin-top: 50px;position: relative;border-bottom: 1px solid rgba(0,0,0,0);overflow: hidden;">

        <div style="height: 200px;width: 100%;background-color: rebeccapurple;margin:  0 0 -100px 0;">

        </div>
        <div style="height: 200px;background-color: peru">

        </div>
    </div>

两个子元素都为普通流，第二个元素向上流动，第一个元素被覆盖掉一部分。
效果：
在这里插入图片描述
总结：普通流以及相对定位元素margin负值时，如果是margin-top为负值，那么盒子会向上流动。如果是margin-bottom为负值，会让后面的盒子向上流动。覆盖规则为：无定位或者定位方式相同时，在没有设置z-index的情况下，向上流动的元素覆盖前面的元素。定位方式不同时，有定位的元素覆盖无定位的元素。
元素流动只能是向上流动，或者向左流动（内联元素）。

css中margin为负值的情况。

猜你喜欢