position為fixed時設定z-index失效
作為一個假的前端,在除錯一個頁面時出現瞭如下bug。
左側的選單固定為fixed時,二級選單無法設定有效的z-index,導致選單隱藏在頁面元素之下,明明頁面元素的z-index是1,但是無論把選單的z-index設定為多大,都不管用。
查閱了資料,原來谷歌瀏覽器在設定position:fixed;後會觸發元素建立一個新的層疊上下文,並且當成一個整體在父層疊上下文中進行比較。如上面的dom結構,當給b設定了position:fixed;屬性後,會觸發建立一個新的層疊上下文,它的父層疊上下文變成了a,所以b只能在a的內部進行層疊比較。這也就是大家熟聽的“從父原則”。
所以本來所有元素都在root內比較,改為fixed之後只能在父級元素內比較,而父級元素沒有設定z-index,所以無法比較。
所以解決方案是給父級元素設定z-index,一般設定為0就可以了。
摘抄兩點:
1. z-index只有在設定了position為relative,absolute,fixed時才會有效。
2. z-index的“從父原則”。當你發現把z-index設的多大都沒用時,看看其父元素是否設定了有效的z-index,當然別忘了先看看自身是否設定了position。
相關推薦
position為fixed時設定z-index失效
作為一個假的前端,在除錯一個頁面時出現瞭如下bug。 左側的選單固定為fixed時,二級選單無法設定有效的z-index,導致選單隱藏在頁面元素之下,明明頁面元素的z-index是1,但是無論把選單的z-index設定為多大,都不管用。 查閱了資料,原來谷歌
[TimLinux] JavaScript position為fixed時支持水平滾動條
縮小 導致 gif 函數 false spl document 沒有 pla 1. 固定定位 position: fixed;設置好之後,元素在瀏覽器窗口中的位置就固定住了,這個時候,不論是水平移動滾動條,還是垂直移動滾動條,元素是打死都不會動的。 但是當用fixed定位的
解決embed標籤設定z-index無效
今天在網頁上面,有視訊框,還有一個彈出層,當彈出層出來的時候,視訊總會在最上面,設定z-index,也不管用。 發現在IE8中,頂部浮動導航的div在移動到embed視訊上時,總是被embed的fla
關於設定z-index層級無效的問題
最近在寫一個小專案,遇到很多小細節的問題,果然還是要實戰才能知道自己的不足之處啊~迴歸正題,我在一個div明明設定了屬性z-index,但是為什麼在網頁上顯示無效呢?首先排除設定的層級不夠的問題;然後我就去 W3School 查詢了才知道問題所在。 先來看官
IE7 設定z-index的覆蓋問題
<div style="position:relative;z-index:2;"> <div style="position:absolute;z-index:100;width:100px;height:100px;background:red;"></div> <
傳參為0時,查詢語句失效的原因
如下圖,當選擇的貨幣型別為人民幣(value為0)時,模糊查詢語句失效! 之前也遇到這個問題不知道什麼原因,只知道把判斷條件<if>刪掉就可以,這次問了同事後知道了,記錄一下! 原因如下: Mybatis判斷int是否為空只要!=null就行了,如果
元素position設定為fixed而未指定top、bottom、left、right時的定位
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.
position:fixed中z-index不起作用
說在前面:從父原則 dom結構: <div class="a"> <div class="b"></div> </div> <div c
position 與z-index的愛恨情仇
ati img png parent tps 博客 col 9.png 負數 position: static static定位是HTML元素的默認值,即沒有定位,元素出現在正常的流中 position:fixed fixed定位是指元素的位置相對於瀏覽器窗口是
IOS上z-index和fixed定位無效
IOS上z-index和fixed定位無效 在該元素上加: -webkit-transform:translateZ(1px); -moz-transform:translateZ(1px); -o-transform:translateZ(1px); transform:translateZ(1p
Spark2.2+ES6.4.2(三十二):ES API之ndex的create(建立index時設定setting,並建立index後根據avro模板動態設定index的mapping)/update/delete/open/close
要想通過ES API對es的操作,必須獲取到TransportClient物件,讓後根據TransportClient獲取到IndicesAdminClient物件後,方可以根據IndicesAdminClient物件提供的方法對ES的index進行操作:create index,update inde
我的z-index怎麼“失效”了?
大家有沒有遇到這樣的問題,給一個元素加上transform或者opacity等效果後,它的子元素的z-index就“失效了”? 這裡普及一個概念:stacking context,中文翻譯叫做“堆疊上下文”,這裡我們簡稱做“層”。 實際上,真正決定頁面上堆疊順序的並不是z-i
vue框架下,echarts圖表外部容器寬度設定為百分比時內容超出容器以及echarts圖表自適應的實現方案
在vue.js框架下,建立echarts圖表,當圖表的外部容器的寬度設定為百分比時,出現圖表內容寬度超出其外部容器的情況,幾番除錯,得解決方案如下: (備註說明:問題產生的具體原因尚不清晰,後面若知曉了再補充,但是初期解決問題階段一定不要鑽牛角,不是一開始就能或者可以知道真理的) 在建立了e
IE8中的input設定為disabled時,字型顏色設定問題
關於Input不能修改,設定屬性可以為disabled或者readonly 但是,如果設定為disabled,關於字型顏色的設定則不再有效,disabled對顏色的設定免疫,因為顏色太淡,使用者體驗差,所以用readonly,但是readonly會出現游標的閃爍問題,需要設定屬性: $('i
position定位及z-index的使用
使用前提 z-index只能在position屬性值為relative或absolute或fixed的元素上有效。 基本原理 z-index值可以控制定位元素在垂直於顯示屏方向(Z 軸)上的堆疊順序(stack order),值大的元素髮生重疊時會在值小的元素上面。 使用的相對性
margin與padding值設定為百分數時,其值的計算參照最近父級元素width
在前端開發過程中,設定樣式引數margin 與 padding 值為百分數時,其具體值的計算方法需參照最近父級的width計算。 1)exp1: margin-top 為百分數 其中標籤的巢狀關係為: <div class="boxparent">
sobox彈窗控制元件,設定彈出窗的z-index
之前試圖修改js原始碼,想了一天,但是不管用,然後在jsp直接加程式碼,竟然可以了,程式碼如下: function click(){ var lang = 'zh'; var
使用 JSON JavaScriptSerializer 進行序列化或反序列化時出錯。字串的長度超過了為 maxJsonLength 屬性設定的值。
最近公司佈置了報表的開發,這個模組涉及到了幾萬條資料的匯入,然後後臺處理,再返回到前臺並顯示出來,不過當我匯入4W條資料的資料,VS已經支援不過來,幾乎卡住,電腦也接近奔潰,不過處理2W條的資料還是沒問題的。 具體如何解決? c#後臺方法,返回值為 string
Android 防止白屏與華為手機歡迎頁面全屏時設定背景拉伸圖片
1、在drawable裡面書寫歡迎頁面的背景splash_bg檔案 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/re
MySql建立Table時設定編碼為utf-8
設定資料庫編碼 CREATE DATABASE dbname DEFAULT CHARSET utf8 COLLATE utf8_general_ci; 設定資料表編碼 CREATE TA