用途:

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。

注意:

z-index 属性值可以是负的, 如果为正数，则离用户更近，为负数则表示离用户更远。

z-index 仅能在定位元素上奏效（position:relative/absolute/fixed;）

这个属性不会作用于窗口控件，如select对象。

可能的属性值:

值	描述
auto	默认。堆叠顺序与父元素相等。
number	设置元素的堆叠顺序。
inherit	规定应该从父元素继承 z-index 属性的值,任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

不使用 z-index时堆叠顺序

不使用z-index的情况，也是默认的情况，即所有元素都不用z-index时，堆叠顺序如下(序号越大优先级越高):

根元素（即HTML元素）的background和borders
正常流中非定位后代元素
已定位后代元素

即所有定位元素的优先级高于非定位元素,

但非定位元素和非定位元素之间和定位元素和定位元素之间的顺序取决于HTML文档出现顺序, 靠后的优先

浮动z-index堆叠顺序

浮动元素z-index位置介于非定位元素和定位元素之间, 堆叠顺序如下(序号越大优先级越高):

根元素（即HTML元素）的背景和border
正常流中非定位后代元素
浮动元素
正常流中inline后代元素
已定位后代元素

浮动元素之间是不会出现z-index重叠的

非定位元素和非定位元素之间和定位元素和定位元素之间的顺序同上取决于HTML文档出现顺序, 靠后的优先

z-index元素之间的堆叠顺序

再次强调z-index只适用于已经定位的元素（即position:relative/absolute/fixed）

简单来说就是z-index的值越大优先级越高越靠上, 但是事实上没这么简单

子元素的z-index值只在父元素范围内有效,什么意思呢?

每一个定位元素都归属于一个stacking context。根元素形成root stacking context，而其他的stacking context则由定位元素产生（此定位元素的z-index被定义一个非auto的z-index值），定位子元素会以这个local stacking context为参考，用相同的规则来决定层叠顺序。

当stacking context一样的时候，就用z-index的值来决定怎样显示，如果z-index也相同（即stack level相同），则按照档中后来者居上的原则（back-to-front ）的顺序来层叠。

举个例子:

定位元素A（z-index:100）里面有定位元素A1（z-index:300），而定位元素B和元素A兄弟关系（z-index:200）。你会发现无论A1的z-index是多大，也会被z-index是200的B所覆盖，因为A的z-index只有100。

z-index的堆叠顺序是比较复杂的, 本篇只介绍一些简单的堆叠顺序, 推荐一个比较详细的说明:

https://www.cnblogs.com/starof/p/4424926.html

CSS----z-index 属性详解相关推荐

(图文详细)最通俗易懂的CSS 浮动float属性详解
(图文详细)最通俗易懂的CSS 浮动float属性详解声明:本文属于搬砖大神的文章到自己的博客上,原文地址为:https://www.cnblogs.com/iyangyuan/archive/20 ...
CSS中line-height属性详解(CSS之四)
CSS中line-height属性详解基本概念 line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 图中两行基线之间的距离就是行高,基线相关可以查看CSS ...
DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状语法: cursor : auto | all-scroll | col-resize| crosshair | default | hand ...
css动画相关属性详解
css动画相关属性详解文章目录 css动画相关属性详解什么是CSS动画? 一.@keyframes规则二.延迟动画-animation-delay 三.设置动画应运行多少次animation-i ...
CSS中float属性详解
首先我们了解到,CSS网页布局的原理,就是按照HTML代码中对象声明的顺序,以流布局的方式来显示它,而流布局就不得不说到float浮动技术..在HTML中的所有对象,默认分为两种:块元素(block ...
CSS中margin属性详解
margin属性概述 margin是CSS层叠样式表中用来规定围绕在元素边框周围空白区域范围的属性. 该接受任何长度单位,可以是像素.英寸.毫米或 em. 相关属性 margin 可以单独改变元素的上 ...
css 的 hover属性详解
css 的 hover 属性是一种伪类选择器,它可以用来在鼠标悬停在某个元素上时改变该元素或其子元素.同级元素.相邻元素的样式 .hover 属性可以应用于任何元素,不仅仅是链接 .使用 hover ...
css中reset属性详解,css中如何使用counter-reset属性
css中如何使用counter-reset属性发布时间:2020-09-23 14:26:58 来源:亿速云阅读:83 作者:小新这篇文章主要介绍css中如何使用counter-reset属性, ...
html css 文本字体属性详解
文本.字体属性文本属性 color 为字体颜色 font-style 用于打开和关闭斜体文本 font-weight 为字体设置粗细程度 font-size 为文字指定大小 font-family ...
前端CSS input type属性详解
input在前端中使我们需要熟悉使用的一个标签,input中type属性值不止text一个. 1.首先是最常用的 text <input type="text" placeh ...

CSS----z-index 属性详解

用途:

注意:

可能的属性值:

不使用 z-index时堆叠顺序

浮动z-index堆叠顺序

z-index元素之间的堆叠顺序

CSS----z-index 属性详解相关推荐

最新文章

热门文章