初識css層疊上下文

Anchorer 發布于2019-08-29 15:17 / 3695人閱讀

摘要：內聯元素層級在之上。不管是兄弟還是兒子，塊級元素的層級都是后來者居上，但內聯元素始終在塊級元素之上。圖中粉色邊框黑色內聯元素的是浮動元素，它的塊級元素在所有塊級元素之上，但是它的內聯元素在所有內聯元素之下。

css中有很多反人類直覺的東西，所以在學css的過程中最大的樂趣不在于記住多少，而在于自己動手做實驗，一步步顛覆你的直覺，初學css層疊上下文，做了一些簡單的小實驗一步步驗證自己的想法。

broder層級在background之上，把broder設置透明，可透過它看到background的顏色。

內聯元素層級在border之上。

不管是兄弟還是兒子，塊級元素的層級都是后來者居上，但內聯元素始終在塊級元素之上。

塊級元素的內聯元素也是后來者居上，藍色紅點是青色背景的內聯元素，覆蓋了之前塊級元素的內聯元素。

圖中粉色邊框黑色內聯元素的是浮動元素，它的塊級元素在所有塊級元素之上，但是它的內聯元素在所有內聯元素之下。藍色 > 黃色 > 黑色

下面一張圖很好的展示了這些元素之間的層級關系。

灰色背景是浮動，和黑色背景是同級元素，層級應該是后來者居上（上圖所示），但是在黑色背景上加position: relative，浮動元素就跑到他下面去了（下圖所示）。

兩兄弟元素被position: relative后且z-index:auto;，它們的子元素position:absolute后，它們之間的位置關系取決于z-index值的大小，誰大誰在上，如果兩個值相等則后來者居上。

兩個兄弟元素被position: relative定位后且z-index值不為auto，那么它們的子元素position:absolute后的位置關系和z-index的值沒有關系，后來者居上。

GPU云服務器云服務器 docker初識初識關系數據庫 html按鈕層疊 html層疊順序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113224.html

前端菜鳥筆記 Day-3 CSS基礎

摘要：派生選擇器依據元素的位置關系來定義樣式。稱其為上下文選擇器，稱其為派生選擇器。在現在布局中，選擇器常常用于建立派生選擇器。和一樣，也可被用作派生選擇器。文章大綱來源：【Day 3】HTML復習 + CSS基礎初識CSS 入門CSS 初識CSS 層疊樣式表（Cascading Style Sheets），即前端常說的CSS。內容引用：CSS 簡介樣式解決了什么問題？ HTML...

mingzhong 2019-08-30 15:55 評論0 收藏0
前端菜鳥筆記 Day-3 CSS基礎

摘要：派生選擇器依據元素的位置關系來定義樣式。稱其為上下文選擇器，稱其為派生選擇器。在現在布局中，選擇器常常用于建立派生選擇器。和一樣，也可被用作派生選擇器。文章大綱來源：【Day 3】HTML復習 + CSS基礎初識CSS 入門CSS 初識CSS 層疊樣式表（Cascading Style Sheets），即前端常說的CSS。內容引用：CSS 簡介樣式解決了什么問題？ HTML...

DangoSky 2019-08-02 14:12 評論0 收藏0
初識HTML

摘要：簡介超文本標記語言英語，簡稱是一種用于創建網頁的標準標記語言。網頁瀏覽器可以讀取文件，并將其渲染成可視化網頁。網頁瀏覽器也可以引用層疊樣式表來定義文本和其它元素的外觀與布局。元素表示某些重要性的文本，強調文本，而元素表示某些相關性的文本。 HTML簡介超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。HTML是...

wall2flower 2019-08-02 12:10 評論0 收藏0
css屬性的繼承、初識值、計算值、當前值、應用值

摘要：計算屬性的計算值通常包括將相對值轉換成絕對值如單位或百分比。返回的解析值可能是計算值或應用值。最后，計算布局尺寸比如或百分數換算為像素值，結果即應用值。繼承當元素的一個繼承屬性沒有指定值時，則取父元素的同屬性的計算值。 css屬性我覺得大部分學習前端的人應該都沒有按照教科書一般的來學習css，可能是類似搭積木一樣，需要什么拿什么，所以可能最對一些基本的概念沒有很好的理解，這里列出的是...

pkhope 2019-08-29 13:19 評論0 收藏0
理解CSS中的層疊上下文和層疊順序

摘要：后來居上當元素的層疊水平一致層疊順序相同的時候，在流中處于后面的元素會覆蓋前面的元素。相關連接深入理解中的層疊上下文和層疊順序層疊順序探究分層的顯示什么是層疊上下文（stacking context）可以理解為一個dom節點在Z軸高人一等，特性類似于BFC，即層疊上下文的內部子元素再怎么翻江倒海，翻云覆雨都不會影響外部的元素。 CSS2創建層疊上下文的兩種方法（參考MDN）根元...

Bryan 2019-08-30 14:14 評論0 收藏0