1. 程式人生 > 其它 >關於z-index的最大值和最小值

關於z-index的最大值和最小值

  不像其他的部落格一樣,本篇沒有太多的篇幅,只有寥寥幾句,那就是———關於z-index的最大值問題

  在剛接觸到定位的時候,肯定會接觸到z-index這個程式碼,幹什麼用的呢?定位可以將我們要控制的元素放到頁面上的任意位置,而且有的定位還不會影響到其他元素,完全脫離文件流,雖然載入順序沒有改變,但是他的位置卻可以提升到最前面,就好比某寶等大品牌的小提示,會一直固定到瀏覽器的右下角,但是明明這個元素在右下角,但是它下面依然會存在其他元素,這就是一個很常見的使用方式。但是呢,也是因為定位的這個優點,很多初學者就會拋棄像是float浮動改變元素位置、margin外邊距改變元素位置的方式,畢竟這兩種方法都會或多或少影響到其他元素,但是用多了定位之後,很多初學者就會很崩潰的發現,很多元素被重疊到一起了,甚至說一些寬高值比較大的元素已經完全覆蓋掉小的元素,讓小元素身上繫結的一些單擊、雙擊等事件失效——當然,你點選不到這個小元素,怎麼會生效呢,哈哈!

  然後呢,然後就會接觸到今天要提到的知識——z-index,這個程式碼就可以解決掉這個問題。但是接觸的多了,難免會思考一些問題,比如說——我在使用時,好像任意值都會生效,那它的取值是多少呢?

  對於z-index來說,理論上是沒有最大值、最小值的,可以使用任何值,正數、負數、0都是可以的,但是呢,經過測試,最後發現這個程式碼還是有最大值和最小值的。首先,關於最小值,雖然我們在使用負數時也會生效,會讓這個元素跑到另一個元素的下面(兩個元素都有定位,後面的例子也是),但是對於一些瀏覽器來說,當值是負數時,就不會生效。其次就是最大值問題,這個最大值就比較有趣了,它的最大值是2147483647,這個值是32位作業系統的int最大值(像我這種小菜雞,也是百度才知道的),當然,有的小夥伴會發現超過這個數值,也會生效,那是因為當你使用的值超過這個數值時,瀏覽器將使用值 2147483647,是不是很驚喜。