css z-index屬性使用過程當中遇到的問題

時間 2019-11-12

標籤 css index 屬性使用過程當中遇到問題欄目 CSS 简体版

原文原文鏈接

　　z-index屬性在web開發中會常常使用，其主要的做用簡單的說就是把元素的position設置爲absolute、fixed以後，能夠調節元素在文檔上的層級關係。好比常常見到的dialog，mask的實現，dialog的z-index確定要設置的比mask大。寫這篇文章的目的主要是想記錄下遇到的有關z-index可設置的最大值的問題。下面先來看如下代碼運行的結果：javascript

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>css z-index屬性在主流瀏覽器中臨界值</title> <style type="text/css"> html, body, fieldset { margin: 0; padding: 0; } body { font:12px/1.5 'Lucida Grande',tahoma,arial,\5b8b\4f53; *line-height:1.5; } .header { margin: 20px; } .header h3 { width: 380px; } .page { margin: 0 10px; } .zIndex-wrapper { margin: 10px; } .zIndex-normal { color: #999; } .zIndex-warning { color: #ff0000; } #J_zIndex { margin-left: 8px; } .zIndex-browser { margin: 15px 0; } .zIndex-browser .browser { margin-left: 8px; } .zIndex-startValue { margin: 15px 0; } .zIndex-startValue input { margin-left: 8px; } .zIndex-buttons-wrapper { width: 450px; margin-bottom: 10px; display: block; } .zIndex-buttons-wrapper legend { overflow: hidden; white-space: nowrap; width: 430px; cursor: default; } .zIndex-buttons-wrapper .zIndex-legend { width: 190px; } .zIndex-buttons { margin: 10px; } </style> <script type="text/javascript" src="http://l.tbcdn.cn/??s/kissy/1.3.0/seed.js"></script> </head> <body> <div class="header"> <h3>css z-index屬性使用過程當中遇到的問題</h3> </div> <div class="page"> <div class="zIndex-wrapper"> <div class="zIndex-browser"> 瀏覽器： <span id="J_browser" class="browser"></span> </div> <div class="zIndex-startValue"> <label for="startValue">開始值：</label> <input type="text" id="J_startValue" name="startValue" /> </div> z-index： <span class="zIndex-normal" id="J_zIndex"></span> </div> <div id="J_mask" class="tm-mask"></div> <fieldset class="zIndex-buttons-wrapper"> <legend title="經過window.getComputedStyle(elem, null).getPropertyValue(prop)獲取元素z-index屬性">經過window.getComputedStyle(elem, null).getPropertyValue(prop)獲取元素z-index屬性</legend> <div class="zIndex-buttons"> <button class="button" data-set="ByLink" data-get="ByComputedStyle">經過樣式表設置z-index</button> <button class="button" data-set="ByStyle" data-get="ByComputedStyle">經過style設置z-index</button> </div> </fieldset> <fieldset class="zIndex-buttons-wrapper"> <legend class="zIndex-legend">經過elem.style獲取元素z-index屬性</legend> <div class="zIndex-buttons"> <button class="button" data-set="ByStyle" data-get="ByStyle">經過style設置z-index</button> </div> </fieldset> </div> <script> KISSY.use(['dom', 'event', 'ua'], function(S, DOM, Event, UA) { var zIndex = { init: function() { this.initView(); this.getBrowser(); this.regEvent(); }, initView: function() { DOM.val('#J_startValue', this.start); }, regEvent: function() { var that = this, target; Event.on('.button', 'click', function(ev) { target = ev.target; that.start = DOM.val('#J_startValue'); DOM.text('#J_zIndex', ''); DOM.removeClass('#J_zIndex', 'zIndex-warning'); clearInterval(that.interval); that.interval = setInterval(function() { that['get' + target.getAttribute('data-get')](that['set' + target.getAttribute('data-set')]); }, 100); }); //blur事件處理函數重置start值 Event.on('#J_startValue', 'blur', function() { that.start = this.value; }); }, getBrowser: function() { DOM.text('#J_browser', UA.shell + UA[UA.shell]); }, //獲取臨界值 get: function(value, set) { //科學計數法表示的z-index值 if(/^([0-9]+[.]?[0-9]*|[0-9]*[.][0-9]+)[eE][+-]?[0-9]+$/.test(value) || value >= this.max) { DOM.removeClass('#J_zIndex', 'zIndex-normal'); DOM.addClass('#J_zIndex', 'zIndex-warning'); //顯示z-index臨界值 DOM.text('#J_zIndex', this.start); clearInterval(this.interval); //清除使用過的style標籤和元素style屬性 this.clear(); }else{ DOM.text('#J_zIndex', this.start++); set(this.start); } }, getByComputedStyle: function(set) { this.get(DOM.css('#J_mask', 'z-index'), set); }, getByStyle: function(set) { this.get(DOM.get('#J_mask').style.zIndex, set); }, setByLink: function(value) { //移除上次設置的style DOM.remove('.zIndex-style'); //設置新的z-index值 DOM.append(DOM.create('<style class="zIndex-style">.tm-mask {z-index: ' + value + '}</style>'), 'head'); }, setByStyle: function(value) { var mask = DOM.get('#J_mask'); if(!DOM.attr(mask, 'data-zIndex')) { DOM.attr(mask, 'data-zIndex', mask.style.zIndex); } DOM.css('#J_mask', 'z-index', value); }, clear: function() { var mask = DOM.get('#J_mask'); DOM.remove('.zIndex-style'); mask.style.zIndex = DOM.attr(mask, 'data-zIndex'); }, //z-index開始值 start: 9999900, //firefox下經過elem.style.zIndex = '';方式設置z-index //能設置的最大值是2147483647 max: 2147483647, interval: 0 }; //run zIndex.init(); }); </script> </body> </html> css

　　這個demo的目的是查找z-index在各主流瀏覽器裏面能夠設置的臨界值（最大值），首先要說下爲何會有臨界值。在平時的開發過程當中曾經遇到過這樣的狀況，好比有A、B兩個元素，B元素要顯示到A元素上面，也就是說B元素的z-index要比A元素的大，這個時候若是A元素自己的z-index值也很大，而我想經過先獲取A元素的z-index以後經過parseInt方法把獲得到的z-index轉化成整數而後拿這個值+1，可是卻遇到了一個問題，經過parseInt轉化後獲得值很小，這究竟是怎麼回事呢？經過調試發現，是由於firefox把很大的z-index值經過科學計數法來表示了。這樣經過parseInt轉化後獲得很小的值也就很容易理解了，好比parseInt("1e+7", 10)獲得結果是1。html

　　給元素設置z-index有兩種方式，一種是經過樣式表給元素設置z-index，另一種是經過元素的style屬性設置，這個demo中提供了兩種方式設置以及兩種方式的獲取來檢測每種設置方法能夠設置的臨界值。java

結論：經過檢測發現ie6-9，chrome沒有本文討論的臨界值問題，只有firefox有這個問題，因此在使用z-index時候仍是要稍稍注意下的。前面說了設置&獲取z-index都有兩種方式，那麼兩種獲取方式是否有區別呢？通過測試發現確實有區別，若是經過window.getComputedStyle(elem, null).getPropertyValue('z-index')方式獲取，元素可設置的z-index臨界值是9999995。若是經過elem.style.zIndex方法獲取的話元素能夠設置的z-index臨界值是2147483647。web

　　這個demo中使用了kissy seed模塊，用到的是功能有獲取dom元素、獲取（設置）樣式表裏面的z-index屬性，style裏面的z-index屬性和獲取瀏覽器類型和版本號。固然這裏能夠用原生js或者jQuery框架來實現。kissy和jQuery的css方法內部實現原理同樣，主要是經過window.getComputedStyle(elem, null).getPropertyValue(prop)實現的，這種方法會優先獲取元素style裏面的z-index，若是style裏面沒有設置z-index則去獲取樣式表裏面對元素設置的z-index。chrome