zoom屬性 其它 和z index屬性 定位

2021-08-30 01:45:55 字數 2060 閱讀 8993

一.zoom屬性

可設值1.0;100%;(小數,整數,百分數)

作用,值為1.0就為原始大小,2就是兩倍如此類推~~~~

css中文手冊中的例子:

您所看到的文字塊的名字是小強,的名字是旺財,請您從下方的選擇框內加減選擇旺財和小強的zoom值,看一看會發生什麼,然後您就會明白這個屬性的意義。希望您喜歡這本電子書。謝謝。

大小是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-

這個box應該在上面

這個box應該在下面,ie瀏覽器會對定位元素產生乙個新的stacking context ,甚至當元素 z-index的為「auto」。

-2-

這個box應該在上面

這個box應該在下面,ie瀏覽器會對定位元素產生乙個新的stacking context ,甚至當元素 z-index的為「auto」。

-3-

這個box應該在上面

這個box應該在下面,ie瀏覽器會對定位元素產生乙個新的stacking context ,甚至當元素 z-index的為「auto」。

-4-

這個box應該在上面

這個box應該在下面,ie瀏覽器會對定位元素產生乙個新的stacking context ,甚至當元素 z-index的為「auto」。

由1可以看出當container和box2是兄弟,並container被設為定位元素,那麼container的子元素box1在container的z-index值不夠box2大的時候,是始終不能站在box2前面的.

由2,3可以看出當container不是定位元素,box1是定位元素時,box1的z-index值可以決定它在box2的前還是後面.

由4可以看出因為box1不是定位元素所以z-index無效

-5-

這個box應該在上面

這個box應該在下面,ie瀏覽器會對定位元素產生乙個新的stacking context ,甚至當元素 z-index的為「auto」。

#container1,#container2都去掉z-index: 100,效果一樣,因為這樣它們還是同級的.

顯示的前後,第一是看同級的z-index值,第二是全部z-index值都相同的,採用後來者居上的原則.

Zoom屬性解釋

zoom屬性它是ie windows internet explorer 瀏覽器的專有屬性,ff 火狐firefox 等瀏覽器不支援。作用 可以設定或檢索物件的縮放比例。還有其他一些小作用,比如觸發ie的haslayout屬性,清除浮動 清除margin的重疊等。zoom的使用方法 zoom nor...

zoom屬性(IE私有屬性)

其實zoom屬性是ie瀏覽器的專有屬性,firefox等瀏覽器不支援。它可以設定或檢索物件的縮放比例。除此之外,它還有其他一些小作用,比如觸發ie的haslayout屬性,清除浮動 清除margin的重疊等。zoom的使用方法 zoom normal number normal 預設值。使用物件的實...

z index屬性簡介

z index屬性簡介 引用 z index auto number auto 預設值。number 無單位的整數值,可為負數。z index 值較大的元素將疊加在z index值較小的元素之上。對於未指定此屬性的定位物件,z index 值為正數的物件會在其之上,而z index 值為負數的物件在...