这是一个高级CSS问题.
在JSFiddle :(在Chrome 26.0,Firefox 20.0和IE 10上测试)
父级建立堆叠上下文,并且子级具有比父级更高的z-index并覆盖父级,所以这一切都很好.
但是在http://jsfiddle.net/4yRrm/11中呢
现在,孩子们的z-index低于父母.孩子的文本现在在父母的文本下面(因为你可以看到父母的文字用蓝色覆盖儿童文本的黑色),但为什么孩子们的背景颜色会超过父母的颜色呢？请用规范证实你的答案.为什么会出现这样的行为 - 这是否达到了某种目的？
实际上,父级的背景是最低层,然后是子级的背景,然后是子级的文本,然后是父级的文本.因此,父母的绘画处于"极端" - 背景作为最低层,文本作为最顶层,儿童的内容被"夹在"这两个极端.
并且相关的是:当父母建立堆叠背景时,如何让父母完全超越孩子,即使是背景？请不要回答删除positive: relative或删除z-index: 0父项,因为这将无法为子项建立堆叠上下文.即,父母必须有一个position的任一relative,absolute或fixed,并在同一时间,有一个z-index的整数(且不能auto).
css ×1