CSS技巧:z-index的应用 – 千丝海阁

首页 » HTML/CSS » CSS技巧:z-index的应用

CSS技巧:z-index的应用

1852 3

z-index这个属性很好理解,就是除了x,y之外的z坐标,表示的是层的z坐标位置,今天无意中用了这个属性,所以就顺便再继续讲讲这个属性的用法。

定义和用法

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

注释:元素可拥有负的 z-index 属性值。

注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)

例子:有一个浮动的置顶的菜单,它的css大致是这样的。

#cssmenu {
  height: 44px;
  background: #55966c;
  width: 1040px;
  padding-left:10px;
  margin-left: -20px;
}

效果如下,没什么问题,显示很正常。

z

滚动一下,OK也正常,菜单会自动跟随置顶。

z1

但是当tiandi改了其他相关元素的position时,却发现原先的菜单竟然被遮挡到后面去了。

z2

到这个时候,就需要用到z-index这个属性来进行定位,在css中加入一行z-index:1,顿时O了。这里的数字越大表示越上层。

文章评分1次,平均分5.0



上一篇:CSS技巧:文字截断
下一篇:衡天主机更改网站默认首页

本文原始地址:http://www.tiandiyoyo.com/2014/03/css-z-index/
本站所有文章,除了特别注明外,均为本站原创,转载请注明出处来自www.tiandiyoyo.com

您可能还会对以下文章感兴趣:

评论前先开启评论开关:


3 Comments

  1. 之前审查元素时见过这个属性,一直不知道干什么用的。。

  2. 郑永 :

    嗯,有很多技巧I。

  3. 神父 :

    奶是大众点评的工程师?

载入分页评论...