我有一个300 x 200px的div，并用180px字体大小放入一些单词。
下面有2张图片。
很自然地，图像掩盖了单词，因为图像位于文档的后期，因此它将覆盖以前的元素。 （如果HTML元素在树结构中被查看，则它是深度优先搜索的顺序）
但是一旦我将该div的CSS更改为position: relative，那么这些单词将部分覆盖图像。 （O只会在有字母笔划的情况下覆盖图像，O内的空间仍会显示图像。
我认为只有通过改变z-index才能让它掩盖图像？这些单词仍然在文档的正常流程中...是否有一个特殊的规则说位置：relative应该掩盖其他非定位元素？
答案 0 :(得分：1)
是的，定位，z-index和浮动都会对元素的相对堆叠产生影响。并继承祖先的这些属性。
你会在Mozilla的网站上找到一个很好的教程/解释：Understanding CSS z-index以及在tjkdesign网站上可视化和玩耍的工具：How z-index works!（相关文章比mozilla的一个btw短;） ）
IE（曾经）表现得不同......（至少IE＆lt; 8编辑：不是IE9 +和Edge）