2

这是一个高级 CSS 问题。

在 JSFiddle 中：（在 Chrome 26.0、Firefox 20.0 和 IE 10 上测试过）

http://jsfiddle.net/4yRrm/10

父级建立一个堆叠上下文，子级比父级具有更高的 z-index 并覆盖父级，所以这一切都很好。

但是在http://jsfiddle.net/4yRrm/11中呢？

现在孩子的 z-index 比父母低。子文本现在位于父文本下方（您可以看到父文本以蓝色覆盖子文本的黑色），但为什么子文本的背景颜色会高于父文本？请用规范证实你的答案。为什么会有这样的行为——这是否达到了某种目的？

实际上，父级的背景是最低层，然后是子级的背景，然后是子级的文本，然后是父级的文本。所以父母的绘画处于“极端”——背景为最底层，文字为最上层，孩子的内容“夹在”这两个极端之中。

与此相关的是：当父级建立堆叠上下文时，如何让父级甚至在背景上完全高于子级？请不要回答删除positive: relative或删除z-index: 0父级的，因为这将无法为子级建立堆叠上下文。也就是说，父母必须有 a position，或relative，同时有一个整数（并且不能是）。absolutefixedz-indexauto

4

3 回答 3

5

CSS2.1状态：

每个盒子属于一个堆叠上下文。给定堆叠上下文中的每个定位框都有一个整数stack level，这是它在 z 轴上相对于同一堆叠上下文中其他堆叠层级的位置。具有较高堆栈级别的框总是在具有较低堆栈级别的框之前格式化。盒子可能有负的堆栈级别。在堆叠上下文中具有相同堆叠级别的框根据文档树顺序从后到前堆叠。

在每个堆叠上下文中，以下图层按从后到前的顺序绘制：

  1. 构成堆叠上下文的元素的背景和边框。
  2. 具有负堆栈级别（最负优先）的子堆栈上下文。
  3. 流入的、非内联级别的、非定位的后代。
  4. 未定位的浮动。
  5. 流入的、内联级的、非定位的后代，包括内联表和内联块。
  6. 堆栈级别 0 的子堆栈上下文和堆栈级别 0 的定位后代。
  7. 具有正堆栈级别的子堆栈上下文（最不积极的优先）。

从第 1 项和第 2 项中可以看出，具有负堆栈级别的子堆栈上下文（即您的子元素）始终绘制在当前堆栈上下文的背景（即您的父元素）之上。

然后将父元素的文本绘制在子元素上方，如第 5 项所示。

不可能让堆叠上下文完全位于其任何后代之上 -无论您做什么，它的背景和边框都将始终绘制在最底部。由于一个盒子一次只能出现在一个堆叠上下文中（堆叠上下文可以嵌套，但在这里不相关），如果您希望这些元素完全位于父堆叠上下文中，则必须将它们移出父堆叠上下文，同时允许父级为其其他内容建立自己的堆栈上下文。例如，您可以将它们移到父级之外，以便它们成为兄弟姐妹，共享相同的堆叠上下文，在您的情况下是根堆叠上下文。

于 2013-05-12T07:54:20.700 回答
3

非常有趣的问题：

堆叠上下文
（图片来自http://www.vanseodesign.com/css/css-stack-z-index/）

在每个堆叠上下文中，以下图层按从后到前的顺序绘制：

1- 构成堆叠上下文的元素的背景和边框。
2- 具有负堆栈级别的子堆栈上下文（最负优先）。
3- 流入的、非内联级别的、非定位的后代。
4-未定位的浮动。
5- 流内、内联级、非定位后代，包括内联表和内联块。
6- 具有堆栈级别 0 的子堆栈上下文和具有堆栈级别 0 的定位后代。
7- 具有正堆栈级别的子堆栈上下文（最不积极的第一）。

  • 当父级建立堆叠上下文时，如何使父级甚至在背景上完全高于子级？
    如果标准浏览器遵循定义，那么您不能对堆栈上下文及其子项执行此操作，因为这将与定义冲突。
于 2013-05-12T07:55:53.217 回答
0

您的文本节点：

Hello Chip Hello Chip Hello Chip Hello Chip

还获得了堆叠上下文：

  1. #chip01：imaginary-stack-context: 0
  2. #chip01 "Hello Chip..."-imaginary-stack-context: 1
  3. #chip02-imaginary-stack-context: 0
  4. #chip03- imaginary-stack-context: 0（因为您已经使用/ z-indexesz-index: -1使其位于所有其他元素的后面。）positiveauto

@BoltClock 已经给出了 CSS 2.1 规范。

在此处输入图像描述

于 2013-05-12T08:00:40.940 回答