这是一个高级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).
CSS2.1 规定:
每个框属于一个堆叠上下文.给定堆叠上下文中的每个定位框具有整数堆栈级别,这是其在z轴上相对于同一堆叠上下文中的其他堆栈级别的位置.具有更高堆栈级别的盒子总是在具有较低堆栈级别的盒子前面格式化.框可能具有负的堆栈级别.堆叠上下文中具有相同堆栈级别的框根据文档树顺序从后到前堆叠.
在每个堆叠上下文中,以下层按从前到后的顺序绘制:
- 形成堆叠背景的元素的背景和边界.
- 子堆叠上下文与负堆栈级别(最负面的).
- 流入的,非内联级别,非定位后代.
- 未定位的花车.
- 流入的,内联级的,未定位的后代,包括内联表和内联块.
- 堆栈级别为0的子堆栈上下文和堆栈级别为0的已定位后代.
- 堆叠具有正堆栈级别的子堆栈(最少积极的第一个).
从第1项和第2项可以看出,具有负堆栈级别(即您的子元素)的子堆叠上下文始终绘制在当前堆叠上下文(即您的父元素)的背景之上.
然后将父元素的文本绘制在子元素上方,如第5项中所示.
不可能使堆叠环境完全位于其任何后代之上 - 无论您做什么,它的背景和边框都将始终绘制在最底层.由于框一次只能出现在一个堆叠上下文中(堆叠上下文可以嵌套但这里不相关),如果您希望它们完全位于父堆栈下,则必须将这些元素移出父堆栈上下文,同时允许父级为其他内容建立自己的堆叠上下文.例如,您可以将它们移动到父级之外,以便它们成为兄弟姐妹,共享相同的堆叠上下文,在您的情况下是根堆叠上下文.