• Hello!欢迎来到网页设计学!
当前位置: 首页 > HTML&CSS > z-index属性用法详解

z-index属性用法详解

.................................................................................................................................................................

在CSS中z-index属性看似简单,但如果你真的了解它的工作原理,你就会发现表面之下还有更多的应用规则。在本篇文章中,我们将通过一些实际的例子来更深刻的了解一下z-index的内部工作原理,希望在实际的网页应用中对大家有所帮助。

z-index基础

CSS提供了三个不同的定位方式:普通流、浮动、绝对定位。z-index是设置对象的层叠顺序的样式,该样式只对position属性为relative或absolute的对象有效。我们都很熟悉的三维坐标空间中,X轴通常用于表示横向,Y轴代表垂直,Z轴表示与纸面或者屏幕垂直的方向。

x-y-z-axis1

z-index属性可以设置三个值。

1、auto (默认)  堆叠顺序与父元素相等。

2、number 设置元素的堆叠顺序。

3、inherit 规定应该从父元素继承 z-index 属性的值。

number的值可以是正、负或0,值越大越接近用户值越低越远。

如果两个元素被定位在二维空间有共同的区域,在这个共同区域内z-index值比较大的元素将遮挡值较小的元素。

stacking-contexts1
这里是很容易理解的,不过,在实际的应用中我们会遇到更多的问题。比如有时候会发现设置了z-index值却不起作用,首先要搞清楚以下几个问题:

1、当普通流定位的元素与z-index定位的元素重叠时,哪个元素会出现在上面?

2、当一个绝对定位的元素和一个浮动的元素重叠时,哪个元素会出现在上面?

3、当一个绝对定位的元素被嵌套在其他绝对定位元素内,会发生什么?

要回答这些问题,我们还需要了解更多关于z-index的规则。
堆叠顺序

举个例子,在CSS文件中设置网页的背景为蓝色,在一个div层设置背景色为红色也可以设置层的长和宽。加载页面后你会看到一块蓝色背景上有一小块红色,其原因是因为两者遵循了以下堆叠顺序的规则。

1、Background and borders:背景和边界,堆栈中的最低层。

2、Negative Z-Index:负的z-index值

3、Block Level Boxes:块级层

4、Floated Boxes:浮动层,非定位

5、Inline Boxes:内嵌层

6、z-index: 0

7、Positive Z-index:正的z-index值,堆栈中的最高水平。

stacking-order1

如果一个层里有嵌套的层,怎么应用呢?下面举一个例子:

HTML:

<div class="one">
  <div class="two"></div>
  <div class="three"></div>
</div>
<div class="four"></div>

CSS:

div {
  width: 200px;
  height: 200px;
  padding: 20px;
}
.one, .two, .three, .four {
  position: absolute;
}
 
.one {
  background: #f00;
  outline: 5px solid #000;
  top: 100px;
  left: 200px;
  z-index: 10;
}
 
.two {
  background: #0f0;
  outline: 5px solid #000;
  top: 50px;
  left: 75px;
  z-index: 100;
}
.three {
  background: #0ff;
  outline: 5px solid #000;
  top: 125px;
  left: 25px;
  z-index: 150;
}
.four {
  background: #00f;
  outline: 5px solid #ff0;
  top: 200px;
  left: 350px;
  z-index: 50;
}

得到结果如下图:

stacking1

我们可以看到第四个层的z-index值虽然小于第二个和第三个层,但他的顺序位于最上层,因为2、3层嵌套在第一层内, 而第一层的z-index值小于第四层。

本文链接:z-index属性用法详解

转载声明:本站文章若无特别说明,皆为原创,转载请注明来源:网页设计学,不可只有文字没有链接,请尊重他人的劳动成果!否则我们将追究其责任。

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!


...........................................................................................................................................................

相关文章

发表评论

友情链接:

  • 网页设计

专业网页设计师交流平台 设计交流QQ群: 网页设计交流