文档章节

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

没有更多内容

加载失败,请刷新页面

加载更多

Bash重定向详解

Bash重定向详解 Bash的重定向指的是将命令的输入和输出导向不同地方,而不是默认的标准输入、标准输出和标准错误。Bash的重定向实际上是对标准输入、标准输出和标准错误的重置,进而将所需输...

小陶小陶
今天
3
0
EventBus原理深度解析

一、问题描述 在工作中,经常会遇见使用异步的方式来发送事件,或者触发另外一个动作:经常用到的框架是MQ(分布式方式通知)。如果是同一个jvm里面通知的话,就可以使用EventBus。由于Event...

yangjianzhou
今天
6
0
OpenCV图像处理实例:libuv+cvui显示摄像头视频

#include <iostream>#include <opencv2/opencv.hpp>#define CVUI_IMPLEMENTATION#include <cvui.h>extern "C"{#include <uv.h>}using namespace std;#define WINDOW_NAM......

IOTService
今天
3
0
openJDK之JDK9的String

1.openJDK8的String 先来看下openJDK8的String的底层,如下图1.1所示: 图1.1 底层上使用的是char[],即char数组 每个char占16个bit,Character.SIZE的值是16。 2.openJDK9中的String 图2.1...

克虏伯
今天
4
0
UEFI 模式下如何安装 Ubuntu 16.04

作者:知乎用户 链接:https://www.zhihu.com/question/52092661/answer/259583475 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 针对UEFI模式下安装U...

寻知者
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部