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

最新推荐文章于 2023-08-11 11:54:30 发布

janckywong963

最新推荐文章于 2023-08-11 11:54:30 发布

阅读量622

点赞数

分类专栏： CSS学习文章标签： IE 浏览器 CSS ASP.net ASP

CSS学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一.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>

[img]/upload/attachment/113366/1d3c0022-8e7d-3b0b-84aa-8a28bed2ed11.jpg[/img]
图片大小是100*100
当zoom=2时,图片大小就成了200*200
当zoom=0.5时,图片大小就成了50*50
当zoom=3时,pic就成了300*300,比包含它的div还要大~~~
[img]/upload/attachment/113368/7e43410f-d2cf-3ce6-8bee-9fe87e83c10f.jpg[/img]

二.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>

[img]/upload/attachment/113370/961c570e-b78a-331b-bee1-9cd90870305e.jpg[/img]
-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>

[img]/upload/attachment/113372/ea1bef2f-16b4-3ee2-bc0f-dbb1f064c68c.jpg[/img]
-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>

[img]/upload/attachment/113475/9affad41-879d-390e-b0c3-238699de2d7f.jpg[/img]

-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>

[img]/upload/attachment/113374/0167af74-f74e-373b-962e-2f1fd6275ed7.jpg[/img]

由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>

[img]/upload/attachment/113554/cafb995e-255e-37d4-8920-9324c1745f3b.jpg[/img]
#container1,#container2都去掉z-index: 100,效果一样,因为这样它们还是同级的.
显示的前后,第一是看同级的z-index值,第二是全部z-index值都相同的,采用后来者居上的原则.