[DIV/CSS] 元素上下层叠关系总结

从浏览器渲染说起 一个页面的渲染，大致有下几个步骤 这里直接看最后一步Composite: 渲染层合并，这步是渲染最后一个步骤，作用就是把之前绘制的图层（如果有PS的经验的话图层很好理解）按照规定的顺序合并成一个图层，元素的层叠谁在上面谁在下面的关系，就在这步里被规定被最终在浏览器里体现出来了。 那么这个对层叠理解有什么用呢？。。。。。。。。。。并没什么卵用，只是最近看到了而已，科科，直接进入正题吧，个人总结，会比较乱。 开头挂两篇大神的文章保智商 鑫旭大神的深入理解CSS中的层叠上下文和层叠顺序 吹雪大大的不起眼的 z-index 却能牵扯出这么大的学问 其实看完上面两篇基本就够了，不过如果你实在闲的慌又想绕一下自己，好嘞，当我没说，请继续观赏 普通我上还是你上的几种体位 简单说几种常见情况： 文档中后来的居上 结构如下，这里默认box都有长宽和不同的背景颜色 <div class="you"></div> <div class="me"></div> 复制代码http://m.ynmxzx.com/lb/xbzx/2016/0622/1043.html 很显然如果我有一个负值margin就会看到我上你下的情况 z-index正值>auto(0)>负值前面的居上 这里首先要明白的是z-index只针对position不是static的元素起作用。所以我们这里说起z-index，那这个元素一定是和position一起使用。而如果只指定position，那么该元素会默认z-index:auto, have a look