举例详解CSS的z

日期:2021-01-20 类型:科技新闻 

关键词:网页设计,移动端网页设计,大一网页设计作业成品,网页编辑软件,网页在线编辑

一般觉得HTML网页页面是2维的,但具体上,CSS也有1个z-index特性,容许堆叠元素。

    全部的盒实体模型元素都处在3维座标系中。 除大家常见的横座标和纵座标, 盒实体模型元素还能够沿着“z轴”堆叠放置, 当她们互相遮盖时, z轴次序就变得10分关键。

-- CSS 2.1 Section 9.9.1 - Layered presentation
默认设置的放置标准

假设元素沒有特定z-index特性,那末元素依照以下次序叠放(从底到顶)

    根元素的情况和界限
    一般流(无精准定位)里的块元素(沒有position或position:static;)按HTML中的出現次序层叠
    精准定位元素按HTML中的出現次序层叠
   

波动

针对波动的块元向来说,层叠次序变得一些不一样。波动块元素被置放于非精准定位块元素与精准定位块元素之间:

    根元素的情况与边框
    坐落于一般流中的子孙后代块元素依照它们在 HTML 中出現的次序层叠
    波动块元素
    基本流中的子孙后代行内元素
    子孙后代中的精准定位元素依照它们在 HTML 中出現的次序层叠

应用 z-index

假如必须更改默认设置的放置次序,只需给元素特定z-index。z-index务必是整数金额,反映了元素在z轴的部位:

    最底层:间距观查者最远
    ……
    ⑶ 层
    ⑵ 层
    ⑴ 层
    0 层 (默认设置)
    1 层
    2 层
    3 层
    ……
    高层:最贴近观查者

沒有特定z-index的情况下,全部元素默认设置在0层3D渲染。好几个元素的z-index特性同样时,将依照上文叙述的次序合理布局。

应用z-index排列的事例:

留意,div#5的z-index失效,由于未特定position特性。
层叠左右文

特定z-index特性将结构1个层叠左右文。

下列元素组成层叠左右文指:

    根元素html
    精准定位元素,且其z-index值不为auto
    opacity小于1的元素
    在挪动WebKit、Chrome22+以上,特定position: fixed的元素一直会结构层叠左右文,即便z-index为auto。

层叠左右文中的子元素依照前述次序放置。层叠左右文內部的子层叠左右文的z-index只在父层叠左右文中成心义。

总而言之:

    z-index不为auto,opacity小于1的元素会搭建层叠左右文。
    层叠左右文能够嵌入别的层叠左右文。
    每一个层叠左右文和它的同级左右文是单独的。
    每一个层叠左右文是自包括的。