首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

2012-09-15 
关于 z-index为负值的情况 与 height100%的疑惑最近遇到的一个小问题,记录下。?1.将z-index设为负值的话,

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

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

?

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%的时候,各自才会倚赖于父元素。

?


?

?

热点排行