[轉職軟體工程師、自學程式語言] 什麼是 CSS ? 第四章 : Stacking Order

部落格轉移,給讀者更好的閱讀體驗,本文網址 : https://janstockcoin.com/blog/

我們今天講的主題是, 什麼是 CSS,大綱如下


第一章 : The Basics

第二章 : Selectors

第三章 : Layout

第四章 : Stacking Order




➤ Stacking Order

 z-index

 Stacking Context

部落格轉移,給讀者更好的閱讀體驗,本文網址 : https://janstockcoin.com/blog/



正常是看後寫得在最上層,以下是按照 Stacking Order 下層到上層的順序 (1在最下層,2在倒數第二層)

image


elements 各自有自己的 position 因此會互相重疊,那我們可以透過 z-index 來去判斷你要哪個在最上面

z-index 為穿出螢幕的Z軸,它默認值是0,它要搭配再有 position 的時候

image


只要是 position element 還有 有透明度的 element,都是所謂的 Stacking Context

它只會在同一層去比高低,例如 <div id="3"> 它裡面還有4、5、6,而這些4、5、6它只在 <div id="3"> 這一層裡面去比高低,也就是紅色的區塊的那層

所以 <div id="1"> 和 <div id="2"> 只會跟 <div id="3"> 比

image

部落格轉移,給讀者更好的閱讀體驗,本文網址 : https://janstockcoin.com/blog/


第一章 : The Basics

第二章 : Selectors

第三章 : Layout

第四章 : Stacking Order

部落格轉移,給讀者更好的閱讀體驗,本文網址 : https://janstockcoin.com/blog/


痞客邦 : https://warlimit.pixnet.net/blog?utm_source=PIXNET&utm_medium=navbar&utm_term=my_blog

隨意窩 : https://blog.xuite.net/warlimit/blog

Blogspot : https://warlimit.blogspot.com/

如果您喜歡我的文章,請幫我在下方拍手區按圓圈圈裡的拍手圖案5次!
我將得到 Likecoin 的回饋:)

回饋由 Likecoin 基金會出資,您只要註冊/登入帳號(fb、google帳號都可以註冊,不超過1分鐘),按五次左鍵,可以贊助我的文章且完全不會花到錢!若願意成為讚賞公民那是十分感激。
支持創作,正向交流:)

留言

這個網誌中的熱門文章

如何開始 Podcast 製作教學 5大步驟 ! 不需任何成本方法

[Udemy推薦課程] Day 2 The Web Developer Bootcamp 2021 [轉職軟體工程師,自學程式語言]

2021年一夜致富,市值60億美元, 什麼是以太坊經典 ETC