1

我真的很好奇。您可以从元素中获取 z-index，但如果页面是“刚刚构建”而没有定义 z-indices，那将如何解决。浏览器是如何做到的？我们可以通过 javascript 访问它以获取 z-index 的浏览器定义，而不是使用计算机样式组件吗？

我为什么要问？好吧，样式返回 AUTO 一个战利品，但我很好奇根据浏览器等“自动”是什么。

4

2 回答 2

2

浏览器使用自然的堆叠顺序来确定元素的堆叠方式

下面是一个列表，显示了项目适合堆叠上下文的顺序，从堆栈底部开始。此列表假定所有项目都没有应用 z-index：

  • 建立堆叠上下文的元素的背景和边框
  • 具有负堆叠上下文的元素，按出现顺序
  • 非定位、非浮动、块级元素，按出现顺序排列
  • 未定位的浮动元素，按出现顺序排列
  • 内联元素，按出现顺序
  • 定位元素，按出现顺序

有关更多信息，请查看：http ://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

于 2013-09-20T16:45:34.097 回答
2

浏览器是如何做到的？

它只是遵循第 9.9 节中描述的 CSS 规范。尤其是：

auto
生成的盒子在当前堆叠上下文中的堆叠层级为0。盒子不会建立新的堆叠上下文，除非它是根元素。

和：

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

至于如何实际获取给定元素的堆栈级别，我认为 DOM 不会公开此信息，因为它更多的是 CSS 实现细节（另外，对于所有具有 auto 的非定位元素，它无论如何都会为零z-index，因为它是一个相对值而不是绝对值）。正如已经提到的，这些信息都不能通过getComputedStyle()任何一个获得。

于 2013-09-20T16:49:14.503 回答