关于z-index

作者: 李凯强 | 来源:发表于2015-11-21 16:24 被阅读75次
  1. 如果一个元素被加了浮动,那么它的层级高于普通元素
<div id='div1'></div>
<div id='div2'></div>
#div1{
  width:100px;
  height:100px;
  background-color:red;
  float:left;
  opacity:0.3
}
#div2{
  width:50px;
  height:50px;
  background-color:blue;
}

以上代码在一个加了浮动的div后面跟一个普通的div,在浏览器中后者会跑到前者的下面



如果蓝色div上面有文字,文字会和红色div处于同一层级
 <div id='div1'></div>
 <div id='div2'>123</div>
#div1{
  width:50px;
  height:50px;
  background-color:red;
  float:left;
}
#div2{
  width:100px;
  height:100px;
  background-color:blue;
}


这时我们来看看div1的z-index是多少
console.log($('#div1').css('z-index'));
'auto'

虽然div1的层级确实高于div2,但是事实上它并与参与元素间层级的比较(因为它没有加定位属性)

  1. 如果一个元素被加上position:absolute或者position:fixed,那么它的层级高于普通元素(也高于浮动元素)
#div1{
  width:50px;
  height:50px;
  background-color:green;
  position: absolute;
  z-index:0;
  opacity:0.4;
}
#div2{
  width:100px;
  height:100px;
  float:left;
  background-color:orange;
}


以上可以看出:即使设置div1的z-index为0,它的层级也高于浮动元素
  1. 一个元素被加定位属性absolute或者fixed,如果设置它的z-index为负数,他会位于它下面元素的下面
#div1{
  width:50px;
  height:50px;
  background-color:green;
  position: fixed;
  opacity:0.4;
  z-index:-1;
}
#div2{
  width:100px;
  height:100px;
  background-color:orange;
  opacity:0.3
}


绿色本来在橙色得到上面,给绿色加了z-index=-1后,它跑到了橙色的下面

相关文章

  • CSS连载(二、堆叠上下文)

    关于 background2.border3.块级4.浮动 内联 z-index: 0 z-index: + 如果...

  • 关于z-index

    如果一个元素被加了浮动,那么它的层级高于普通元素 以上代码在一个加了浮动的div后面跟一个普通的div,在浏览器中...

  • 三分钟认识z-index

    在基于组件的Web应用程序中管理Z-Index【译】 Z-index尽管有关于此的所有内容,该财产仍然被广泛误解和...

  • z-index学习

    title: z-indexdate: 2017-05-16 z-index z-index z-index 概念...

  • z-index的理解

    第一节:z-index基础 较大的z-index会覆盖较小的那个z-index元素 z-index:auto 默认...

  • z-index属性

    number z-index:3; 按照z-index的大小排序

  • z-index属性的理解

    简单介绍z-index 什么是z-index? z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是...

  • CSS深入理解之z-index 笔记

    z-index 与 css 定位属性 z-index 只对定位元素有作用。 如果定位元素z-index没有发生嵌套...

  • z-index 须知

    z-index 需要先加入 position:absolute/relative 定位 可参考z-index

  • 搞懂Z-index的所有细节

    Z-index测试网站 一 z-index 在什么情况下才生效? Z-index的运用是需要条件的,与其相关的属性...

网友评论

    本文标题:关于z-index

    本文链接:https://www.haomeiwen.com/subject/ukalhttx.html