css-關於z-index一些小事

-
z-index是一個可以設定元素推疊順序，當z-index的值愈高，順序就愈上面，反之，若想讓他的順序在下面，也可以使用負值

z-index會伴隨著position(定位)，除了屬性值:static(預設值)不能使用外，其他absolute(絕對)、relative(相對)、fixed(固定)都能使用

如下範例1當寫入z-index=1而沒有position，產生的畫面完全不為所動
See the Pen
z-index-1 by yennnnyu (@yennnnn)
on CodePen.




範例2當寫入z-index=1也有設置position，產生結果box2會比box1的堆疊順序變成在上面了
See the Pen
z-index-2 by yennnnyu (@yennnnn)
on CodePen.



範例3當寫入z-index=-1也有設置position，產生結果box3會比box1的堆疊順序變成在下面
See the Pen
z-index-3 by yennnnyu (@yennnnn)
on CodePen.



大家也可以試著修改看看哦~
See the Pen
z-index by yennnnyu (@yennnnn)
on CodePen.

留言

張貼留言

這個網誌中的熱門文章

JS趴趴往上走-插入HTML標籤的兩種方式

-
innerHTML innerHTML可以設定HTML中的元素，也可以單純的字串寫入HTML中的某一部分,傳進語法進行渲染，是用來設計與網友互動的網頁特效方法 請先新增HTML再新增Javascript看效果哦! 範例:跟改文字 //html <p class="text"></p> //Javascript //定義p var pt=document.querySelector('.text'); //更換文字 pt.innerHTML="我變更了!"; 範例:內部新增元素 //html <ul class="text"></ul> //Javascript //定義ul var ult=document.querySelector('.text'); //新增元素 ult.innerHTML="<li>我是清單</li>"; 優點:效能快 缺點:資安風險，要確保來源沒問題 差異:是一次性渲染，會把前面資料給覆蓋過去 Document.createElement() 創建一個新元素,以DOM節點來處理 語法: var element = document.createElement(創建元素); 範例: //html <ul class="text"></ul> //Javascript //創建li元素 var str=document.createElement('li'); //新增文字 str.textContent="新增清單!"; //在.text下新增子節點(str) document.querySelector('.text').appendChild(str); 優點:安全性高 缺點:效能差 差異:產生的結果會繼續接在原本有的元素後面，不像 innerHTML 會重新覆蓋
閱讀完整內容

JS趴趴往上走-switch篇

-
switch 上一回我們講到 if..else ，這節來說說 switch switch 也是條件判斷，不同條件執行不同動作 switch(條件內容){ case 判斷為此: ..執行內容..; break; case 判斷為此: ..執行內容..; break; case 判斷為此: ..執行內容..; break; case 判斷為此: ..執行內容..; break; default: ..執行內容..; break; } 用範例來說我們可以(判斷日期) var week="Wednesday"; switch(week){ case "Monday": console.log("今天星期一"); break; case "Tuesday": console.log("今天星期二"); break; case "Wednesday": console.log("今天星期三"); break; case "Thursday": console.log("今天星期四"); break; case "Friday": console.log("今天星期五"); break; case "Saturday": case "Sunday": console.log("放假日!"); break; default: console.log("錯誤"); break; ...
閱讀完整內容

JS趴趴往上走-if篇

-
if...else if...else 是條件判斷式，用來判別你所需要的內容，如同語法所說，假如怎樣怎樣...否則怎樣怎樣 if(條件內容){ ..執行內容.. }else(條件內容){ ..執行內容.. } 條件內容是回傳 boolean 值 true 和 flase ，當第一條件為 true ，就會執行 { } 的內容，若為 false 則執行下一步 而當你需要判斷的數量多時，可以使用 else if 來增加條件判斷 if(分數>0並且 =60並且 =80 除了 if...else ，我們也可以使用 if...retrun 回傳錯誤 所以有 retrun ，就不需要 else if(分數 但是使用 if..else 方式若你條件判斷很多的話，會導致效能不好，每跑一次就會重新執行，所以這時 switch 就會是你的好選擇! 資料來源: https://blog.wu-boy.com/2013/01/you-must-be-known-js-condition/ https://www.ithome.com.tw/voice/108380
閱讀完整內容