CSS教程:网页布局定位及z-index解释

互联网 发布时间：2008-10-17 19:25:37 作者：佚名

声明定位元素： position属性值设置除默认值static以外的元素，包括relative，absolute，fixed。平台：win/IE win/FF z-index 用来确定定位元素在垂直于显示屏方向（以下称为Z轴）上的层叠顺序值：auto | 整数 | inherit 默认：auto 适用于：定位元素继承性

测试
FF下测试
运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<meta name="Keywords" content="z-index,IE,Firefox,stacking context,stack level" />

<meta http-equiv="Description" content="这是一个在火狐中测试层叠级别（stack level)的页面" />

<meta content="all" name="robots" />

<meta name="author" content="rong179，rong179@yahoo.cn" />

<meta name="copyright" content="http://rong179.blogbus.com" />

<title>stack level 在火狐中的测试</title>

<style type="text/css" media="all">

#container {position:relative;left:100px;z-index:0;background: purple;width:500px;}

#container div {height:200px;width:200px;}

#box-p-zn { position:relative;z-index:-1;background-color:yellow; top:-25px;left:-30px;}

#box-block {background-color: aliceblue;margin-top:-30px;margin-left:150px;}

#box-float {float:left;margin:-50px 100px 0 0;background-color: red;}

#box-inline {background-color: gray;display:inline;padding:50px 0;}

#box-p-za { position: absolute; top:50px;left:50px; background-color: green;}

#box-p-zp { position: relative;z-index:1;background-color: greenyellow;}

</style>

</head>

<body>

<div id="container">

<div id="box-p-zp">这个box position:relative;z-index:1;定位元素z-index值为正 </div>

<div id="box-p-za">这个box position:absolute;z-index:auto;定位元素z-index值auto</div>

<div id="box-inline">这个box inline;<br />inline元素</div>

<div id="box-float">这个box float;

<br /><br /><br /><br /><br /><br />未定位的浮动元素</div>

<div id="box-block">----这个box block;未定位的块级元素</div>

<div id="box-p-zn">这个box z-index:-1;定位元素z-index值为负</div>

<!-

调试之用

-->

</div>

</body>

</html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]
测试页面：
http://rong179.blogbus.com/files/12163574750.html（请分别在FF3.0和FF2.0中打开）
代码说明：
由前所述，如果元素的stack level同级则后来居上；元素的stack level高，这无论代码在文档中位置如何都显示在上面，即使代码在最前面；如果元素的stack level低，无论代码位置如何都将显示在下面，即使代码在最后面。
我们就根据这一点，以“3.文本流中非定位的、block块级子元素”和“4.文本流中非定位的、float浮动子元素”为例，如果我把“float元素” 的代码写在“block元素”的前面，且实际显示为：“float元素”在“block元素”之上。即可证明："float元素”的stack level级别较“block元素”高。因为如果同级,或者“block元素”的stack level高都应是“block元素”显示在上。
根据以上，根据标准中的顺序，把stack level高的元素代码写在前面，stack level低的代码写在后面，如果显示结果是：代码在前面的元素显示在上方，即证明上面的stack level规则。
测试结果：

css z-index 最大值
z-index最大值,最小值以及同值时层的高低，做了个测试z-index的最大值,有几个结论如下
2009-05-28
css z-index 在IE中的迷惑
z-index属性简介引用: z-index : auto | number auto：默认值。 number：无单位的整数值，可为负数。 z-index 值较大的元素将叠加在z-index值较小的元素之上。对
2009-05-29
CSS教程:元素层叠级别及z-index-CSS教程-网页制作-网页教学网
原文：http://rong179.blogbus.com/logs/24966909.html 声明定位元素：position属性值设置除默认值static以外的元素，包括relative，absolute，fixed。平台：win/I
2008-10-17
css设置z-index 失效的解决方法
设置z-index时必须要固定位置，这样设置它的值时才能奏效（例如 position:absolute;）下面是示例代码，在ff3.5.5和ie5.5~ie8.0RC1中通过，大家可以尝试着不固定其位置试试
2009-11-26
CSS 定位之 z-index 问题分析
IE6/7对z-index的表现跟IE8及以上浏览器不一致。position值为非static时，如果不设置z-index属性，IE6/7下z-index默认为0，而IE8及以上浏览器z-index为auto，且zindex:auto
2012-11-13
一个关于CSS Z-index 的东东,解决了我很多疑问
发现有时候真得多看看书,以前一直纳闷为什么有时候可以,有时候不可以,原来是这个原因.
2011-03-23
CSS的z-index实例代码
写了个最简单的DEMO，演示了3个DIV互相遮盖的情况。记住：z-index要配合position属性才有效
2012-02-25
ie下的css层叠z-index各种问题详细整理
可是真有些日子没有写DIV+CSS了，而且对IE6兼容性的坑碰到的还是不够多(以前做国外项目)，所以这次开发中不可避免的碰见了几个问题，尤其是在IE下的 z-index 问题很有意思
2013-01-09
CSS元素的层叠与z-index设置-CSS教程-网页制作-网页教学网
　　我们在文章的更新中，特别注重对新手的辅导，但webjx.com面对的是广大的开发人员，大家可能会遇到各种各样的问题，有些问题很不常见，或者应用的很少，但我们依然有必
2008-10-17
CSS属性探秘系列(七)：z-index
在这篇文章里，我们会准确的说明究竟什么是Z-index，它为什么会这么不为人所了解，并一起讨论一些关于它的实际使用中的问题。我们同时会描述一些会遇到的浏览器间的差异，
2014-10-22

CSS教程:网页布局定位及z-index解释

相关文章

最新评论

文章分类

大家感兴趣的内容

最近更新的内容