zoom属性(其它)和z-index属性(定位)

ap0406708

浏览: 277186 次
性别:
来自: 深圳

最近访客更多访客>>

yuanyu113

姜子鸭

sxzheng96

helloworld_i_android

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS学习

IE 浏览器 CSS ASP.net ASP

一.zoom属性
可设值1.0;100%;(小数,整数,百分数)
作用,值为1.0就为原始大小,2就是两倍如此类推~~~~
css中文手册中的例子:

<div style="background:#EEEEEE;padding:10px;width:240px;">
<img src="img/demo.gif" width=100 height=100 id=demo1 style="float:right;zoom:1;">
<div id=demo0 style="clear:none;">您所看到的文字块的名字是<span class=span2>小强</span>，图片的名字是<span class=span2>旺财</span>，请您从下方的选择框内加减选择旺财和小强的zoom值，看一看会发生什么，然后您就会明白这个属性的意义。希望您喜欢这本电子书。谢谢。</div>
</div>

图片大小是100*100
当zoom=2时,图片大小就成了200*200
当zoom=0.5时,图片大小就成了50*50
当zoom=3时,pic就成了300*300,比包含它的div还要大~~~

二.z-index属性
值可设一个正或负的数,故明思义是z轴上的位置,正就在上方,负就在下方,
效果要根据父元素(更远点祖先)和自己的z-index值
（position 属性值为 relative 或 absolute 或 fixed的对象）z-index值才生效
-1-

<html>
<head>
<style type="text/css">
#container {  position: relative; background-color: red; width: 300px;height:300px; } 
#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: 20; } 
#box2 { position: absolute; top: 50px; left: 160px; width: 200px; height: 200px; background-color: green; z-index: 10; } 

</style>
</head>

<body>
<div id="container"> 
<div id="box1">这个box应该在上面</div> 
</div> 
<div id="box2">这个box应该在下面，IE浏览器会对定位元素产生一个新的stacking context ，甚至当元素 z-index的为“auto”。</div>
</body>

</html>

-2-

<html>
<head>
<style type="text/css">
#container { background-color: red; width: 300px;height:300px; } 
#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: 20; } 
#box2 { position: absolute; top: 50px; left: 160px; width: 200px; height: 200px; background-color: green; z-index: 10; } 

</style>
</head>

<body>
<div id="container"> 
<div id="box1">这个box应该在上面</div> 
</div> 
<div id="box2">这个box应该在下面，IE浏览器会对定位元素产生一个新的stacking context ，甚至当元素 z-index的为“auto”。</div>
</body>

</html>

-3-

<html>
<head>
<style type="text/css">
#container { background-color: red; width: 300px;height:300px; } 
#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: 1; } 
#box2 { position: absolute; top: 50px; left: 160px; width: 200px; height: 200px; background-color: green; z-index: 10; } 
</style>
</head>
<body>
<div id="container"> 
<div id="box1">这个box应该在上面</div> 
</div> 
<div id="box2">这个box应该在下面，IE浏览器会对定位元素产生一个新的stacking context ，甚至当元素 z-index的为“auto”。</div>
</body>
</html>

-4-

<html>
<head>
<style type="text/css">
#container {  background-color: red; width: 300px;height:300px; } 
#box1 { top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: 20; } 
#box2 { position: absolute; top: 50px; left: 160px; width: 200px; height: 200px; background-color: green; z-index: 10; } 

</style>
</head>

<body>
<div id="container"> 
<div id="box1">这个box应该在上面</div> 
</div> 
<div id="box2">这个box应该在下面，IE浏览器会对定位元素产生一个新的stacking context ，甚至当元素 z-index的为“auto”。</div>
</body>

</html>

由1可以看出当container和box2是兄弟,并container被设为定位元素,那么container的子元素box1在container的z-index值不够box2大的时候,是始终不能站在box2前面的.
由2,3可以看出当container不是定位元素,box1是定位元素时,box1的z-index值可以决定它在box2的前还是后面.
由4可以看出因为box1不是定位元素所以z-index无效

http://www.xlnv.net/Article/base/200905/608.html
http://www.w3school.com.cn/css/pr_pos_z-index.asp

-5-

<html>
<head>
<style type="text/css">
#container1 {position: absolute;  background-color: red; width: 500px;height:500px; z-index: 100;} 
#container2 {position: absolute;  background-color: blue; width: 300px;height:300px; z-index: 100;}
#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: 1; } 
#box2 { position: absolute; top: 50px; left: 160px; width: 200px; height: 200px; background-color: green; z-index: 10; } 
</style>
</head>
<body>
<div id="container1"> 
<div id="box1">这个box应该在上面</div> 
</div> 
<div id="container2">
<div id="box2">这个box应该在下面，IE浏览器会对定位元素产生一个新的stacking context ，甚至当元素 z-index的为“auto”。</div>
</div>
</body>
</html>