`
karaschee
  • 浏览: 14859 次
  • 性别: Icon_minigender_1
  • 来自: 四川
社区版块
存档分类
最新评论

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

    博客分类:
  • CSS
阅读更多

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

 

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%是无用的

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

 


 

 

分享到:
评论

相关推荐

    z-index为负值的元素无法点击到的解决方法

    主要介绍了z-index为负值的元素无法点击到的解决方法,需要的朋友可以参考下

    margin 负值引起的层级(z-index)问题

    主要为大家介绍margin 负值引起的层级(z-index)问题的解决方法,需要的朋友可以参考下

    CSS中的z-index属性基本使用教程

    需要注意的是 z-index 虽然很给力,却只能应用于定位元素(即设置了 position 属性为非 static 值),其它情况下,z-index 将被忽略。 对于定位元素而言,z-index 意味着: 确定该元素在当前层叠上下文中的层叠级别...

    HTML5&CSS3网页制作:zindex层叠等级属性.pptx

    z-index层叠等级属性 z-index层叠等级属性 01 z-index层叠等级属性 当对多个元素同时设置定位时,定位元素之间有可能会发生重叠。 定位导致重叠 z-index可以调整重叠定位元素的堆叠顺序,其取值可为正整数、负整数和...

    androidlayout-marginBottom的值为负数.docx

    为什么有时候像android:layout_marginBottom等变量的赋值为负数? 例如如下代码: &lt;?xml version="1.0" encoding="UTF-8"?&gt;  android:orientation="vertical"  android:id="@id/Widget_2X4_frame"  android:...

    CSS中背景background-position负值定位

    CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位

    ArcGIS问题:面积出现负值的情况

    ArcGIS问题:面积出现负值的情况的解决方法

    仿Google 自动输入框,详细注释版

    line-height:100%; font-size:12px; } input { width:300px; } h1 { text-align:center; font-size:2.2em; /* 1em=16px(浏览器默认为16px,可以在CSS的body选择器中声明Font-size=62.5%,简化转换。)*/ } #divf...

    CSS line-height行高上下居中垂直居中样式属性

    line-height:+数字+单位(在CSS布局中我们一般采用像素px为单位)行高line-height的值可以为百分比数字 | 由浮点数字和单位标识符组成的长度值,允许为负值。其百分比取值是基于字体的高度尺寸。 二、行高应用介绍 ...

    新能源上市公司财务危机预警研究——基于修正的Z-Score模型.pdf

    在选择研究样本时,我们借鉴了学者的研究经验,以两种情况来判别新能源上市公司是否陷入财务危机:一是因财务状况异常而被特别处理,二是最近一个会计年度扣除非经常性损益的净利润为负值。依据该标准,我们选取了32...

    C语言运算符详解(很基础的哦)

    C语言运算符详解(很基础的哦),一、算术运算符 + 加法运算符 应有两个量参与加法运算 a=b+c — 减法运算符(也可作负值运算符) a=b-c * 乘法运算符 / 除法运算符 注意:“/”参与运算量均为整型时,结果也为整型...

    Stock.zip_Stock Z星_hospitalfv2_股票 软件_队列

    在浩瀚的宇宙中,有一个存在智能生物的星球,名为Z星。与地球相似,在Z星上也存在着股票交易所。对于某只股票,Z星的交易规则如下:  1. 股票可以通过报价指令某个报价进入市场,市场中可以存在某只股票的多个报价...

    PDF提取文字信息到Excel(附源码)

    shift=3 --提取目标内容相对关键字的偏移量,可以是负值,表示目标内容在关键字左侧,具体偏移几个字符可以预估,然后测试微调 length=3 --提取目标字符的长度 命令行显示“存放文档的文件夹名称” 是指源PDF文档...

    wince的GPS模拟器

    ~ 1 2 3 4 5 6 7 8 9 0:速度分别设为 5 10 20 30 40 50 60 80 100 120 0 Km/h (自由驾驶模式、手控速度航迹重播模式) ~ 1 2 3 4 5 6 7 8 9 0:速度比例分别设为 0.2 0.3 0.5 0.75 1 1.5 2 3 5 10 0 ...

    论文研究-灰色系统中含负值项数列的数据提升建模方法.pdf

    论文研究-灰色系统中含负值项数列的数据提升建模方法.pdf, 按灰色系统的微分拟合建模理论,要求原始数据非负或经有限次累加生成可以变为非负,否则就放弃该方法。本文给出一种新的处理数据的方法,使得任何含负值项的...

    巴黎银行-欧洲-宏观策略-债券收益率内在估值模型变为负值-0328-9页.pdf

    巴黎银行-欧洲-宏观策略-债券收益率内在估值模型变为负值-0328-9页.pdf

    C语言程序设计标准教程

    b=b-100; a=b;'Vtable a,2,543 b,4,0.0 of Vtable 'Vupdate 1,543 2,0.0 2,123.123962 2,23.123962 1,23 of Vupdate of Practice 字符型量 字符型量包括字符常量和字符变量。 字符常量 字符常量是用单引号括起来的...

    Si-Ca-Ba三元合金熔体热力学性质的计算 (2007年)

    结果表明,在1873K时Si-Ca-Ba合金熔体的过剩自由能、生成热和过剩熵均为负值。在富硅区域和硅含量较少的区域,各热力学性质的变化趋势较大。过剩自由能、生成热和过剩熵的最小值均出现在xSi=55%,xCa=45%,xBa=0成分...

    为什么RSSI是负值

    为什么RSSI是负值,其实归根到底为什么接收的无线信号是负值,这样子是不是容易理解多了。因为无线信号多为mW级别,所以对它进行了极化,转化为dBm而已,不表示信号是负的。1mW就是0dBm,小于1mW就是负数的dBm数。

Global site tag (gtag.js) - Google Analytics