css - 了解 z-index 堆叠顺序

标签 css css-position z-index

我对使用 z-index 有点困惑决定堆栈顺序。

我不太明白浏览器如何处理带有 position 的元素属性(property)与没有属性(property)的人一起。

是否有一个一般规则来决定元素的堆栈顺序是否有明确定位的元素?

不同情况的例子值得赞赏。通常来说,一般来说:

  • 混合兄弟<div> s 有位置设置和没有位置设置。
  • 嵌套 <div> s 与 sibling 混在一起 <div> s 有位置设置和没有位置设置。
  • 最佳答案

    CSS 基础知识 z-index属性(property)

    一个简单的概念
    z-index属性基于一个简单的概念:具有较高值的​​元素将位于沿 z 轴具有较低值的元素之前。所以如果你申请 z-index: 1div.box1 , 和 div.box2有一个 z-index: 0 ,然后 div.box1将覆盖 div.box2 .

    就z轴而言,它指的是三维平面上的深度。在您的计算机上,它可以解释为物体离您越来越近的平面。 (了解有关 Cartesian coordinate system 的更多信息。)

    enter image description here
    来源:Wikipedia

    z-index适用于定位元素

    除非您正在处理 flex 元素或网格元素,否则 z-index属性仅适用于定位元素。这意味着您可以使用 z-index在带有 position: absolute 的元素上, position: relative , position: fixedposition: sticky .如果元素有 position: static (默认值),或其他一些定位方案,如 float ,然后 z-index不会有任何影响。

    如前所述,虽然 z-index ,如 CSS 2.1 中所定义, 仅适用于定位元素, flex itemsgrid items即使在 position 时也可以创建堆叠上下文是 static .

    4.3. Flex Item Z-Ordering

    Flex items paint exactly the same as inline blocks, except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static.

    5.4. Z-axis Ordering: the z-index property

    The painting order of grid items is exactly the same as inline blocks, except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static.



    这是z-index的演示处理非定位的 flex 元素:https://jsfiddle.net/m0wddwxs/

    堆叠上下文

    一旦一个元素被定位和一个 z-index应用时,会创建一个堆叠上下文。

    (另见:Full list of circumstances where a stacking context is created.)

    堆叠上下文是一组规则,用于管理带有 z-index 的定位元素。 ,及其后代。这些规则控制子元素在堆叠顺序中的放置以及属性影响的范围。

    本质上,堆叠上下文限制了 z-index元素本身的范围,其子元素不能影响另一个堆叠上下文中元素的堆叠顺序。

    如果您曾经尝试申请越来越高 z-index values 只是发现元素永远不会移出前面,您可能试图在不同的堆叠上下文中覆盖元素。

    Groups of elements with a common parent that move forward or backward together in the stacking order make up what is known as a stacking context. A full understanding of stacking contexts is key to really grasping how z-index and the stacking order work.

    Every stacking context has a single HTML element as its root element. When a new stacking context is formed on an element, that stacking context confines all of its child elements to a particular place in the stacking order. That means that if an element is contained in a stacking context at the bottom of the stacking order, there is no way to get it to appear in front of another element in a different stacking context that is higher in the stacking order, even with a z-index of a billion!

    ~ What No One Told You About Z-Index



    堆叠顺序

    CSS 在页面上布置元素时遵循堆叠顺序。这些是没有z-index时的堆叠规则指定,从最远到最近:
  • 根元素的背景和边框
  • 非定位、非 float 块元素,按照它们在源代码中出现的顺序
  • 非定位 float 元素,按照它们在源代码中出现的顺序
  • 内联元素
  • 定位元素,按照它们在源代码中出现的顺序

  • 如果 z-index应用属性,修改堆叠顺序:
  • 根元素的背景和边框
  • 带有 z-index 的定位元素小于 0
  • 非定位、非 float 块元素,按照它们在源代码中出现的顺序
  • 非定位 float 元素,按照它们在源代码中出现的顺序
  • 内联元素
  • 定位元素,按照它们在源代码中出现的顺序
  • 使用 z-index 定位的元素大于 0

  • 来源:W3C

    底线:一旦您了解了堆叠上下文,z-index简单。

    例如 z-index在行动中见:How z-index works!

    一篇简短但内容丰富的文章解释 z-index (包括 opacity 如何影响堆叠顺序)参见:What No One Told You About Z-Index

    有关 z-index 的完整纲要,有很多例子和插图,参见:MDN Understanding CSS z-index

    如需深入了解堆叠上下文,请阅读:W3C Elaborate description of Stacking Contexts

    关于css - 了解 z-index 堆叠顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32513540/

    相关文章:

    html -::before 伪元素在使用 % 边距与静态边距相比创建文本换行

    CSS 网格在 Safari 中不起作用

    jquery - 如何设置嵌套在标签标签中的复选框的样式

    html - 如何使 "position: absolute"元素居中

    html - 试图在矩形 CSS 上实现矩形

    javascript - 具有意外结果的嵌套 z-index 分层

    css - Foundation 5 CSS Z-index 顶部栏下拉菜单问题

    jquery - 多次更改 mouseleave 上的类

    css - 表格中的粘性行和列标题

    html - 带有 z-index 的图像中心