Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
您的搜索结果

    z-index

    摘要

    z-index 属性指定了一个元素及其子元素的 z-order。 当元素之间重叠的时候,z-order 决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的一个。

    对于一个固定位置的元素,z-index 属性指定:

    1. 元素在当前堆叠上下文中的堆叠层级。
    2. 元素是否创建一个新的本地堆叠上下文。

    • 初始值 auto
    • 适用元素 positioned elements
    • 可继承 no
    • 适用媒体 visual
    • 计算值 as specified
    • 可动画 yes, as an integer
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    语法

    Formal syntax: auto | <integer>
    
    z-index: auto     /* Keyword value */
    z-index: 0        /* <integer> value */
    z-index: 3
    z-index: 289
    
    z-index: inherit
    

    取值

    auto
    元素不会建立一个新的本地堆叠上下文。当前堆叠上下文中新生成的元素和父元素堆叠层级相同。
    <integer>
    整型数字是生成的元素在当前堆叠上下文中的堆叠层级。元素同时会创建一个堆叠层级为0的本地堆叠上下文。这意味着子元素的 z-indexes 不与元素外的其余元素的 z-indexes 进行对比。

    示例

    position:relative; z-index:1; position:absolute; z-index:2; left:60px; top:3em; position:absolute; z-index:3;
    left:20em; top:-25px; opacity:0.9

    规范

    Specification Status Comment
    CSS Transitions Working Draft Defines visibility as animatable.
    CSS Level 2 (Revision 1) Recommendation Initial specification.

    浏览器兼容性

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 1.0 1.0 (1.7 or earlier) 4.0 4.0 1.0
    Negative values (CSS2.1 behavior, not allowed in the obsolete CSS2 spec) 1.0 3.0 (1.9) 4.0 4.0 1.0
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support ? ? ? ? ?

    参阅

    文档标签和贡献者

    此页面的贡献者有: TimZhao, teoli
    最后编辑者: teoli,