文档章节

z-index不起作用

拉普拉斯婷
 拉普拉斯婷
发布于 2016/06/17 10:31
字数 854
阅读 16
收藏 0

之所以转贴这篇文章,是很多朋友比较疑惑z-index这个样式。其实只要先知道以下2点就可以很容易的理解了——

1、要想给元素设置z-index样式,必须先让它变成定位元素,再通俗一点说,就是要给元素设置一个postion:relative(或者 absolute或者fixed)样式。

2、不要给想控制“上、下”的元素设置z-index,而是对他们的父容器设置z-index样式。这一点详细解释和原因在《精通html和css设计模式》一书中较为详细的解释。

《元素层叠级别(stack level)及z-index剖析》 声明

定位元素:position属性值设置除默认值static以外的元素,包括relative,absolute,fixed。 平台:win/IE win/FF

z-index:

用来确定定位元素在垂直于显示屏方向(以下称为Z轴)上的层叠顺序

值:      auto | 整数 | inherit
默认:      auto
适用于:  定位元素
继承性:  no 

理解stacking context

每个box都归属于一个stacking context,它是元素在z轴方向上定位的参考。根元素形成 root stacking context,其他stacking context由定位元素设置z-index为非auto时产生。如#div1{position:relative;z-index:0;}即可使 id=div1的元素产生stacking context。stacking context和 containing block 并没有必然联系。

理解stack level

在一个stacking context中的每个box,都有一个stack level(即层叠级别,以下统一用stack level),它决定着在同一stacking context中每个box在z轴上的显示顺序。同一stacking context中,stack level值大的显示在上,stack level值小的显示在下,同一stack level的遵循后来居上的原则(back-to-front )。不同stacking context中,元素显示顺序以父级的stacking context的stack level来决定显示的先后情况。于自身stack level无关。注意stack level和z-index并不是统一概念。(将在后文慢慢理解)

stack level规则

每个stacking context中可包含块级(block)元素、内联(行内inline)元素,还有设置float属性的元素、定位元素等等他们在同一父级 stacking context中的显示顺序是怎样的?即stack level是怎样的呢?比如一个块级元素和内联元素发生层叠的话谁会在上面呢?是不是谁在后面谁就在上面呢?

根据w3c关于stack level的介绍可以得出以下stack level规则

每个stacking context都包括以下stack level (后来居上):

1.父级stacking context的背景、边界
2.z-index值为负值的定位元素(值越小越在下)
3.文本流中非定位的、block块级子元素
4.文本流中非定位的、float浮动子元素
5.仿佛能产生stacking context的inline元素
     否则,inline元素的stack level将在block元素之前。
6.z-index:auto/0的定位元素
7.z-index值为正的定位元素(值越大越在上) 

以上stack level在浏览器执行情况: firefox3.0下测试完全吻合,firefox2.0下稍有不同即:“z-index值为负值的定位元素”在“父级stacking context的背景、边界”之前。 ie6.0和7.0中:inline元素的stack level位于block元素之前,且“文本流中非定位的、float浮动子元素”(以下简称浮动元素)和“文本流中非定位的、block块级子元素”(以下简称block元素)处于同一级。

本文转载自:http://blog.csdn.net/teresa502/article/details/5277543

共有 人打赏支持
拉普拉斯婷
粉丝 0
博文 33
码字总数 5836
作品 0
深圳
私信 提问
div层调整z-index属性无效原因分析及解决方法

这是在学习css中遇到的一个问题。 div层调整zindex属性在IE中无效原因分析及解决方法 在CSS中,只能通过代码改变层级,这个属性就是z-index,要让z-index起作用有个小小前提,就是元素的pos...

球球
06/12
0
0
常见的ie6下z-index不起作用的问题及解决方法

一、概念 z-index伴随着层的概念产生的。网页中,层的概念与photoshop或是flash中层的概念是一致的。熟悉photoshop或是flash的应该知道,层级越高(图层越靠上),越在上面显示,如果层发生重...

狂沙lover
2013/03/13
0
0
IE6下z-index犯癫不起作用bug的初步研究[转]

by zhangxinxu from http://www.zhangxinxu.com 一、匆匆带过的概念 关于CSS中层级z-index的定义啊什么的不是本文的重点,不会花费过多篇幅详细讲述。这里就简单带过,z-index伴随着层的概念...

曾沙
2012/06/26
0
0
常见浏览器的兼容问题

1 ie6.0横向margin加倍 产生因素:块属性、float、有横向margin。 解决方法:display:inline; 2 ie6.0下默认有行高 解决方法:overflow:hidden;或font-size:0;或line-height:xx px; 3 在...

effto
2016/09/04
31
0
apache rewrite问题

RewriteCond %{HTTPHOST} ^[a-zA-Z0-9][^www]+.mingliangtuan.com$ RewriteRule ^/?$ /%{HTTPHOST} RewriteRule ^/([a-zA-Z0-9]+).mingliangtuan.com/?$ /city-index.php?changecity=$1 [NC]......

动起来
2011/06/11
141
1

没有更多内容

加载失败,请刷新页面

加载更多

css hack

浏览器的兼容性一直是个头疼的问题,使用“欺骗”技术可使各个浏览器效果一致,花了些时间整理了各个浏览器的HACK,主要包括IE系列和最新版本的Chrome、Safari、Firefox、 Opera,比较全面的...

kitty1116
24分钟前
0
0
zookeeper脑裂问题

一、为什么zookeeper要部署基数台服务器? 二、zookeeper脑裂(Split-Brain)问题 2.1、什么是脑裂? 2.2、什么原因导致的? 2.2、zookeeper是如何解决的? 一、为什么zookeeper要部署基数台...

tantexian
30分钟前
1
0
Spring事务传播行为详解

前言 Spring在TransactionDefinition接口中规定了7种类型的事务传播行为。事务传播行为是Spring框架独有的事务增强特性,他不属于的事务实际提供方数据库行为。这是Spring为我们提供的强大的...

码代码的小司机
40分钟前
2
0
Android设备通过fastboot刷入TWRP

方法一:通过fastboot刷入TWRP的方式 首先去TWRP官网下载TWRP安装文件https://twrp.me/Devices/ 1.进入bootloader adb reboot bootloader 也可在开机时,同时按住电源键+音量减,进入bootloa...

robslove
45分钟前
0
0
为何译为“东家机”和“宾客机”

学习过虚拟化、云计算的人大概都知道,并且都在自己的电脑上安装KVM,如下图所示: 什么情况?不过是在物理机的Windows 10上安装了VMware;在VMware上安装了Linux CentOS 7操作系统;又在其上...

大别阿郎
59分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部