渲染層也切、堆疊次序與z-index

渲染層

渲染層創(chuàng)建條件

  • 頁面的根元素<html>創(chuàng)建了默認的堆疊上下文
  • 成為定位元素且具有非auto的z-index屬性值
  • 元素具有小于 1 的 opacity 屬性
  • 在 Webkit 和 Chrome 22+ 中男窟，固定定位的元素，即使 z-index 為 auto，也會創(chuàng)建
  • transform 屬性不為 none

堆疊次序

默認堆疊次序

沒有z-index屬性的元素磕秤，按照一下順序從底到頂依次排列

  1. 根節(jié)點的背景和邊框
  2. 文檔流中的后代元素，按照在HTML中出現的順序
  3. 浮動元素
  4. 脫離文檔流的定位后代元素捧韵，按照在HTML中出現的順序
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末市咆，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子再来，更是在濱河造成了極大的恐慌蒙兰，老刑警劉巖磷瘤，帶你破解...
    沈念sama閱讀 211,123評論 6贊 490
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現場離奇詭異搜变，居然都是意外死亡采缚，警方通過查閱死者的電腦和手機，發(fā)現死者居然都...
    沈念sama閱讀 90,031評論 2贊 384
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門挠他，熙熙樓的掌柜王于貴愁眉苦臉地迎上來扳抽，“玉大人，你說我怎么就攤上這事殖侵∶衬兀” “怎么了？”我有些...
    開封第一講書人閱讀 156,723評論 0贊 345
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵拢军，是天一觀的道長楞陷。 經常有香客問我，道長茉唉，這世上最難降的妖魔是什么猜谚？ 我笑而不...
    開封第一講書人閱讀 56,357評論 1贊 283
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮赌渣，結果婚禮上魏铅，老公的妹妹穿的比我還像新娘。我一直安慰自己坚芜，他們只是感情好览芳，可當我...
    茶點故事閱讀 65,412評論 5贊 384
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著鸿竖，像睡著了一般沧竟。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上缚忧，一...
    開封第一講書人閱讀 49,760評論 1贊 289
  • 城市分裂傳說
    那天悟泵，我揣著相機與錄音，去河邊找鬼闪水。 笑死糕非，一個胖子當著我的面吹牛，可吹牛的內容都是我干的球榆。 我是一名探鬼主播朽肥，決...
    沈念sama閱讀 38,904評論 3贊 405
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼持钉！你這毒婦竟也來了衡招？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 37,672評論 0贊 266
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤每强，失蹤者是張志新（化名）和其女友劉穎始腾，沒想到半個月后州刽，有當地人在樹林里發(fā)現了一具尸體，經...
    沈念sama閱讀 44,118評論 1贊 303
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡浪箭，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年怀伦，在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片山林。...
    茶點故事閱讀 38,599評論 1贊 340
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖邢羔，靈堂內的尸體忽然破棺而出驼抹，到底是詐尸還是另有隱情，我是刑警寧澤拜鹤，帶...
    沈念sama閱讀 34,264評論 4贊 328
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布框冀，位于F島的核電站，受9級特大地震影響敏簿，放射性物質發(fā)生泄漏明也。R本人自食惡果不足惜惯裕，卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3贊 312
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一温数、第九天 我趴在偏房一處隱蔽的房頂上張望蜻势。 院中可真熱鬧撑刺，春花似錦握玛、人聲如沸够傍。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0贊 21
  • 一樁弒父案挠铲，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽冕屯。三九已至拂苹，卻和暖如春安聘，著一層夾襖步出監(jiān)牢的瞬間瓢棒，已是汗流浹背搞挣。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1贊 264
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留音羞，地道東北人囱桨。 一個月前我還...
    沈念sama閱讀 46,286評論 2贊 360
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像嗅绰，于是被迫代替她去往敵國和親舍肠。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 43,465評論 2贊 348

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案叽躯？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,734評論 1贊 92
  • CSS 定位 CSS有三種基本的定位機制：普通流谍夭，浮動黑滴，絕對定位(absolute, fixed)：普通流是默認定...
    _空空閱讀 5,723評論 0贊 15
  • 一:在制作一個Web應用或Web站點的過程中紧索，你是如何考慮他的UI、安全性珠漂、高性能晚缩、SEO媳危、可維護性以及技術因素的...
    Arno_z閱讀 1,141評論 0贊 1
  • 1.z-index基礎 z-index屬性指定了元素及其子元素的[z順序]，而[z順序]可以決定當元素發(fā)生覆蓋的時...
    徐國軍_plus閱讀 6,347評論 1贊 6
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表卿泽，主要用...
    寥寥十一閱讀 1,815評論 0贊 6