在盒模型中比较特殊的属性z-index层级属性

时间:2022-08-11 阅读:216 评论:0 作者:zhushican

在盒模型中比较特殊的属性z-index层级属性

盒模型中,还有一个比较特殊的属性z-index层级属性,当多个div重叠在一起时,z-index属性用于设置哪个位于最上层(即用户可见的那一层),z-index的值是一个数字,是一个相对的概念,没有特别的值,可以任意设置,所谓相对,是指为多个div设置z-index的值,谁的值最大,谁就会显示在最上层,特别是对于div绝对定位时比较有效,如果是浮动定位,则全部处理文档流按顺序显示,也不存在谁覆盖谁一说。通过案例4-20来体验,效果如图4-25所示。

4-20  example20.html

 

<!DOCTYPE html>

 

<html  lang="en">

 

<head>

 

    <meta  charset="utf-8">

 

    <title>z-index属性设置层级</title>

 

    <style>

 

          div{ width: 400px;height: 400px;

 

             border: 1px solid red;margin: 20px;float:left;

 

  /*绝对定位后不占空间重叠在一起,最后一个li在最外层*/

 

             position: absolute;    

 

   }

 

</style> 

 

</head>

 

<body>

 

 <div style="background-color:  aqua;">1</div>

 

<div  style="background-color: red; z-index: 3;">2</div>

 

<div  style="background-color: blueviolet;">3</div>

 

</body>

 

</html>

 

在盒模型中比较特殊的属性z-index层级属性

4-25 盒模型

当设置position: absolute绝对定位属性时,3个div就重叠在一起,最后一个div在最外层,当要让第二个div显示在最外层时,设置其z-index属性,值越大层级就越高,

在盒模型中比较特殊的属性z-index层级属性

4-26 z-index属性设置层级显示

使用z-index重叠顺序样式,尽量避免使用负值,在实际DIV+CSS布局时候我们需要绝对定位样式,并且可以使用leftright进行定位,通过不同z-index值实现层重叠顺序排列。

本模块详细介绍了各种布局相关的属性,包括传统的使用float属性实现多栏布局,使用clear清除浮动,overflow属性控制显示等,本模块还重点介绍了盒模型的布局定位,如何利用盒模型完成更灵活的页面布局以及盒模型的关键特性及布局策略,通过本模块的学习,将能够更加深入地理解CSS的关键属性和作用。


本文链接: http://www.zh-xm.com/post/133.html 转载请注明出处!

评论区 交流一下吧!

共有0条评论来说两句吧...

欢迎 发表评论: