在很多情况下都需要实现两个div的重叠（包含层级关系），实现的方法也和div中属性设置的不同也是不一样的，尤其是position和display的变化.
但是总体上就是对margin（盒模型）和top（定位）等的运用。margin是属于盒模型中的一部分，修改了margin，就是修改了div元素的大小，但是修改了定位，只是修改了自己本身的位置，不修改元素占用的大小，也不会干扰其他元素的位置。
1. 但是依靠margin来重叠有很大的局限性，图片如下：
设置margin-top之后
这是设置了黄色div块的margin-top才实现的，你也可以设置蓝色div的margin-bottom。如果你设置黄色div的margin-bottom就不能实现重叠的效果。
2. 当两个div的position为relative时，可以同时使用盒模型和定位来实现重叠。使用定位来选择位置时，优先级为top>bottom，left>right，优先级高的会屏蔽低的。
3. 当两个div的position为absolute时，那么父元素必须设置一个定位属性（不能为默认的static），这样子div才能相对于父div布局。
网友评论