資訊專欄INFORMATION COLUMN
摘要：內(nèi)聯(lián)元素層級在之上。不管是兄弟還是兒子，塊級元素的層級都是后來者居上，但內(nèi)聯(lián)元素始終在塊級元素之上。圖中粉色邊框黑色內(nèi)聯(lián)元素的是浮動(dòng)元素，它的塊級元素在所有塊級元素之上，但是它的內(nèi)聯(lián)元素在所有內(nèi)聯(lián)元素之下。
css中有很多反人類直覺的東西，所以在學(xué)css的過程中最大的樂趣不在于記住多少，而在于自己動(dòng)手做實(shí)驗(yàn)，一步步顛覆你的直覺，初學(xué)css層疊上下文，做了一些簡單的小實(shí)驗(yàn)一步步驗(yàn)證自己的想法。
broder層級在background之上，把broder設(shè)置透明，可透過它看到background的顏色。
內(nèi)聯(lián)元素層級在border之上。
不管是兄弟還是兒子，塊級元素的層級都是后來者居上，但內(nèi)聯(lián)元素始終在塊級元素之上。
塊級元素的內(nèi)聯(lián)元素也是后來者居上，藍(lán)色紅點(diǎn)是青色背景的內(nèi)聯(lián)元素，覆蓋了之前塊級元素的內(nèi)聯(lián)元素。
圖中粉色邊框黑色內(nèi)聯(lián)元素的是浮動(dòng)元素，它的塊級元素在所有塊級元素之上，但是它的內(nèi)聯(lián)元素在所有內(nèi)聯(lián)元素之下。藍(lán)色 > 黃色 > 黑色
下面一張圖很好的展示了這些元素之間的層級關(guān)系。
灰色背景是浮動(dòng)，和黑色背景是同級元素，層級應(yīng)該是后來者居上（上圖所示），但是在黑色背景上加position: relative，浮動(dòng)元素就跑到他下面去了（下圖所示）。
兩兄弟元素被position: relative后且z-index:auto;，它們的子元素position:absolute后，它們之間的位置關(guān)系取決于z-index值的大小，誰大誰在上，如果兩個(gè)值相等則后來者居上。
兩個(gè)兄弟元素被position: relative定位后且z-index值不為auto，那么它們的子元素position:absolute后的位置關(guān)系和z-index的值沒有關(guān)系，后來者居上。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113224.html
摘要：派生選擇器依據(jù)元素的位置關(guān)系來定義樣式。稱其為上下文選擇器，稱其為派生選擇器。在現(xiàn)在布局中，選擇器常常用于建立派生選擇器。和一樣，也可被用作派生選擇器。 文章大綱來源：【Day 3】HTML復(fù)習(xí) + CSS基礎(chǔ) 初識CSS 入門CSS 初識CSS 層疊樣式表（Cascading Style Sheets），即前端常說的CSS。 內(nèi)容引用：CSS 簡介 樣式解決了什么問題？ HTML...
摘要：派生選擇器依據(jù)元素的位置關(guān)系來定義樣式。稱其為上下文選擇器，稱其為派生選擇器。在現(xiàn)在布局中，選擇器常常用于建立派生選擇器。和一樣，也可被用作派生選擇器。 文章大綱來源：【Day 3】HTML復(fù)習(xí) + CSS基礎(chǔ) 初識CSS 入門CSS 初識CSS 層疊樣式表（Cascading Style Sheets），即前端常說的CSS。 內(nèi)容引用：CSS 簡介 樣式解決了什么問題？ HTML...
摘要：簡介超文本標(biāo)記語言英語，簡稱是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。網(wǎng)頁瀏覽器可以讀取文件，并將其渲染成可視化網(wǎng)頁。網(wǎng)頁瀏覽器也可以引用層疊樣式表來定義文本和其它元素的外觀與布局。元素表示某些重要性的文本，強(qiáng)調(diào)文本，而元素表示某些相關(guān)性的文本。 HTML簡介 超文本標(biāo)記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。HTML是...
摘要：計(jì)算屬性的計(jì)算值通常包括將相對值轉(zhuǎn)換成絕對值如單位或百分比。返回的解析值可能是計(jì)算值或應(yīng)用值。最后，計(jì)算布局尺寸比如或百分?jǐn)?shù)換算為像素值，結(jié)果即應(yīng)用值。繼承當(dāng)元素的一個(gè)繼承屬性沒有指定值時(shí)，則取父元素的同屬性的計(jì)算值。 css屬性 我覺得大部分學(xué)習(xí)前端的人應(yīng)該都沒有按照教科書一般的來學(xué)習(xí)css，可能是類似搭積木一樣，需要什么拿什么，所以可能最對一些基本的概念沒有很好的理解，這里列出的是...
摘要：后來居上當(dāng)元素的層疊水平一致層疊順序相同的時(shí)候，在流中處于后面的元素會(huì)覆蓋前面的元素。相關(guān)連接深入理解中的層疊上下文和層疊順序?qū)盈B順序探究分層的顯示 什么是層疊上下文（stacking context） 可以理解為一個(gè)dom節(jié)點(diǎn)在Z軸高人一等，特性類似于BFC，即層疊上下文的內(nèi)部子元素再怎么翻江倒海，翻云覆雨都不會(huì)影響外部的元素。 CSS2創(chuàng)建層疊上下文的兩種方法（參考MDN） 根元...
閱讀 1682·2019-08-30 12:51
閱讀 670·2019-08-29 17:30
閱讀 3707·2019-08-29 15:17
閱讀 862·2019-08-28 18:10
閱讀 1373·2019-08-26 17:08
閱讀 2184·2019-08-26 12:16
閱讀 3446·2019-08-26 11:47
閱讀 3510·2019-08-23 16:18
