蚂蚁部落

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 50|回复: 1

css设置元素层叠顺序详解

[复制链接]
发表于 2017-1-7 01:36:06 | 显示全部楼层 |阅读模式
本帖最后由 antzone 于 2017-1-7 01:40 编辑

css设置元素层叠顺序详解:
在css中,每一个盒模型的位置都是三维的,x轴和y轴定位,还有盒与盒之间的层叠关系。
定位元素,我们可以通过通过z-index属性来确定它们之间的相互层叠关系,具体可以参阅z-index属性用法详解一章节,但这只是盒模型层叠规则的一部分,下面就深入介绍一下这方面的相关知识。
先来看一段代码实例:
[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.container{
  position:relative;
  background:#ccc;
}
.container > div{
  width:200px;
  height:200px;
}
.float{
  float:left;
  background-color:blue;
}
.inline-block{
  display:inline-block;
  background-color:green;
  margin-left:-100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="inline-block">蚂蚁部落一</div>
  <div class="float">蚂蚁部落二</div>
</div>
</body>
</html>

从上面的代码表现可以看出,是内联块级元素覆盖在了float元素之上;两个元素交换位置也是如下:
[HTML] 纯文本查看 复制代码运行代码
<div class="container">
  <div class="float">蚂蚁部落二</div>
  <div class="inline-block">蚂蚁部落一</div>
</div>

虽然上面的元素都不是定位元素,但是还是有层叠关系,这涉及到stacking level(层叠级别)知识。
下面这个图片就能够介绍上面的现象:
1.png
上面的图片表示不同类型盒层叠级别的高低,下面由低到高进行一下说明:
(1).背景和边框:建立当前层叠上下文元素的背景和边框。
(2).负的z-index:当前层叠上下文中,z-index属性值为负的元素。
(3).块级盒:文档流内非行内级非定位后代元素。
(4).浮动盒:非定位浮动元素。
(5).行内盒:文档流内行内级非定位后代元素。
(6).z-index:0:层叠级数为0的定位元素。
(7).正z-index:z-index属性值为正的定位元素。
特别说明:当定位元素z-index:auto,生成盒在当前层叠上下文中的层级为 0,不会建立新的层叠上下文,除非是根元素。
创建层叠上下文:
只要满足一定的条件,元素就可以创建一个层叠上下文,下面就简单进行一下罗列:
(1).HTML根元素会天然创建一个层叠上下文,无需特殊条件。
(2).绝对定位元素或者相对定位元素,但是z-index属性值不为auto。
(3).伸缩项目Flex Item,且z-index值不为 auto,即父元素 display: flex|inline-flex。
(4).元素的opacity属性值小于1。
(5).元素的 mix-blend-mode属性值不为normal。
(6).元素的filter属性值不为normal。
(7).元素的isolation属性值为isolate。
(8).在will-change中指定了任意CSS属性,即便你没有定义该元素的这些属性。
(9).元素的-webkit-overflow-scrolling属性值为touch。
下面就通过代码实例对实际应用中常见的情况进行一下分析,为了节省空间,只给出了代码的核心部分。
没有规定z-index属性值:
[HTML] 纯文本查看 复制代码运行代码
<body>
    <div id="absdiv1">DIV #1</div>
    <div id="reldiv1">DIV #2</div>
    <div id="reldiv2">DIV #3</div>
    <div id="absdiv2">DIV #4</div>
    <div id="normdiv">DIV #5</div>
</body>

运行效果图如下:
2.png
图片说明:
(1).DIV#1和DIV#4是粉色框,position设置为absolute。
(2).DIV#2和DIV#3是绿色框,position设置为relative。
(3).DIV#5是黄色框,非定位元素。
DIV#5在最底层,因为它是非定位元素,即便它是DOM树中的最后一个,但是它还是会被最先绘制。
其他元素由于都是定位元素,并没有明确规定z-index属性值,层叠顺序在文档树中靠后的,就在上层。
特别说明:完整文章可以查阅MDN对应文章。
浮动元素的层叠:
[HTML] 纯文本查看 复制代码运行代码
  <div id="absdiv1">
    <br /><span class="bold">DIV #1</span>
    <br />position: absolute;
  </div>

  <div id="flodiv1">
    <br /><span class="bold">DIV #2</span>
    <br />float: left;
  </div>

  <div id="flodiv2">
    <br /><span class="bold">DIV #3</span>
    <br />float: right;
  </div>

  <br />

  <div id="normdiv">
    <br /><span class="bold">DIV #4</span>
    <br />no positioning
  </div>

  <div id="absdiv2">
    <br /><span class="bold">DIV #5</span>
    <br />position: absolute;
  </div>

运行效果图如下:
3.png
图片说明:
(1).DIV#1和DIV#5是粉色框,position设置为absolute;
(2).DIV#2和DIV#3是绿色框,float设置分别为left和right,opacity是1;
(3).DIV#4是黄色框,非定位元素。
DIV#4是非定位元素,所以它的层级最低,会最先绘制,并且它并没有建立一个新的层叠上下文,所以它的子元素<span>和DIV#1、DIV#2、DIV#3和DIV#5都是位于根元素创建的层叠上下文中;由于span是内联元素,它的层叠级数要高于DIV#2浮动元素,所以DIV#2会先绘制,然后span元素再绘制,于是被挤到了右侧。又因为定位元素层叠级数高于浮动元素,所以DIV#1和DIV#5会覆盖在DIV#2和DIV#3之上。
特别说明:完整文章可以查阅MDN对应文章。
设置透明度:
使用的是上面的代码,只是将DIV#1,DIV#2,DIV#3,DIV#5的opacity设置为0.7。
运行效果图如下:
4.png
DIV#3的层级被提高到了DIV#1,规则如下:
(1).如果opacity小于1且未定位,则按其定位、z-index: 0 且 opacity: 1 的情况中的层叠顺序绘制。
(2).如果opacity小于1且已定位,层叠顺序就按照z-index值来确定,但是auto要视为0, 因为新的层叠上下文总是创建了的。
transform:
运用此属性不但可以创建一个层叠上下文,而且还会改变定位元素的参考对象。
具体可以参阅transform变换可以改变定位元素的包含块一章节。
发表于 2017-1-11 20:20:45 | 显示全部楼层
现在好文章越来越多了

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复返回顶部 返回列表