关于 z-index为负值的情况与 height=100%的疑惑

karaschee

浏览: 15177 次
性别:
来自: 四川

最近访客更多访客>>

jeffers0054

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

z-index css height ie6

最近遇到的一个小问题，记录下。

1.将z-index设为负值的话，元素会最贴近BODY，但是不能穿过body，之前我直接在body上加了个需隐藏的元素textarea，发现怎么也消失不了。最后加了个带背景的DIV把textarea套起来就可以了。用DIV把他遮住。

<body> 
	<div style="background:#fff">
		<textarea id="log" cols="50" rows="10" ></textarea>
		<input id="popBtn" type="button" value="pop a window" />
	</div>
</body>

2.关于不同浏览器的position:absolute;height:100%的表现

1）看以下代码：

<body style="height:3000px"> 
	<div id="test" style="position:absolute;top:0;left:0;width:100%;height:100%;backgroung:#ddd;">
		
	</div>
</body>

开始以为test会遮住整个页面（高3000px），但结果是：

IE6：高3000px

ff:长度搞好是窗口高度

原因：height取值

值描述

auto	默认。浏览器会计算出实际的高度。
length	使用 px、cm 等单位定义高度。
%	基于包含它的块级对象的百分比高度。
inherit	规定应该从父元素继承 height 属性的值。

而将position设为absolute之后，此元素会相对于 static 定位以外的祖先元素进行定位，一级一级的向上找，直到找到 static 定位以外的祖先元素,并以此元素为基准进行定位。

所以在这时包含它的块级对象是window，应按window的高度取值。

为什么IE6是3000px呢？因为ie6会默认给body赋值position:relative;

2）那么将body的height:3000px.取消掉又是什么情况呢？

<body> 
	<div id="test" style="position:absolute;top:0;left:0;width:100%;height:100%;backgroung:#ddd;">
	</div>

<div style="height:4000px;"></div>
</body>

浏览器表现如下：

ie6:只有很小的一截,约2、3行的样子

ff:长度刚好是窗口高度

FF的表现很好理解，但为什么ie6的高不是4000px（左右）呢？

原因是，在IE6中，如果不设定父级元素的高度，则设定层高x%是无用的

这个时候给body设height:100%就行了，但是此时test的高度仍然不是4000px，而是和标准浏览器一样，长度刚好是窗口高度。

3）IE与标准浏览器的body\html 100%高度算法的不同

A:将body设为100%

标准浏览器:

body = document

html = docuemnt

ie6:

body = window ;执行$("body").height()后，body = document，原因不明

html = window

B:将body设为100%、html设为100%

标准浏览器:

body = window

html = window

ie6:

body = document

html = window

总结：

对于标准浏览器：body 倚赖于html,html依赖于window。

如果html的height为auto，那么html=document.如果height为100%,那么html=window.

如果body的height为auto，那么body=document.如果height为100%,那么body=html.

所以，当body和html为height:100%的时候，各自才会倚赖于父元素。

分享到：

【phenomenon】onscroll事件绑定 | 关于报错和undefined

2011-08-12 17:28
浏览 3820
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论