一.zoom属性
可设值1.0;100%;(小数,整数,百分数)
作用,值为1.0就为原始大小,2就是两倍如此类推~~~~
css中文手册中的例子:
您所看到的文字块的名字是小强,图片的名字是旺财,请您从下方的选择框内加减选择旺财和小强的zoom值,看一看会发生什么,然后您就会明白这个属性的意义。希望您喜欢这本电子书。谢谢。
[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-
这个box应该在下面,IE浏览器会对定位元素产生一个新的stacking context ,甚至当元素 z-index的为“auto”。
[img]/upload/attachment/113370/961c570e-b78a-331b-bee1-9cd90870305e.jpg[/img]
-2-
这个box应该在下面,IE浏览器会对定位元素产生一个新的stacking context ,甚至当元素 z-index的为“auto”。
[img]/upload/attachment/113372/ea1bef2f-16b4-3ee2-bc0f-dbb1f064c68c.jpg[/img]
-3-
这个box应该在下面,IE浏览器会对定位元素产生一个新的stacking context ,甚至当元素 z-index的为“auto”。
[img]/upload/attachment/113475/9affad41-879d-390e-b0c3-238699de2d7f.jpg[/img]
-4-
这个box应该在下面,IE浏览器会对定位元素产生一个新的stacking context ,甚至当元素 z-index的为“auto”。
[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-
这个box应该在下面,IE浏览器会对定位元素产生一个新的stacking context ,甚至当元素 z-index的为“auto”。
[img]/upload/attachment/113554/cafb995e-255e-37d4-8920-9324c1745f3b.jpg[/img]
#container1,#container2都去掉z-index: 100,效果一样,因为这样它们还是同级的.
显示的前后,第一是看同级的z-index值,第二是全部z-index值都相同的,采用后来者居上的原则.