標籤: css

【CSS】z-index

條件

  1. 內元素絕對定位（所有）
  2. 外元素相對定位
  3. 目標元素指定index

※z-index的數值代表優先度。
數字大，表示優先顯示的強度越強（排在前面）
數字小，表示優先顯示的強度越低（隱藏在後面）←反向操作：設負數讓元素被蓋住

範例

沒有設index的情況下，HTML下面的元素會蓋掉上面的元素

.box1
.box2
body
 position: relative //外元素相對定位

.box1,.box2
 width: 200px
 height: 200px
 border: 1px solid #eee
 
.box1
 background-color: #73c6a8
 position: absolute //內元素絕對定位
 
.box2
 background-color: #73c0c6
 position: absolute //內元素絕對定位

 margin-top: 50px
 margin-left: 50px

Display

.
.

 

 

 

 

 

 

綠色方塊的HTML在上面，藍色方塊的HTML在下面。
所以藍色方塊優先顯示，蓋掉綠色方塊

設定z-index，優先顯示目標元素

.box1
.box2
body
 position: relative //外元素相對定位

.box1,.box2
 width: 200px
 height: 200px
 border: 1px solid #eee
 
.box1
 background-color: #73c6a8
 position: absolute //內元素絕對定位
 z-index: 1
 
.box2
 background-color: #73c0c6
 position: absolute //內元素絕對定位

 margin-top: 50px
 margin-left: 50px

Display

.
.

 

 

 

 

 

 
設定index為1，優先顯示綠色方塊

【CSS】Width fix the list text

問題背景

<li>在不指定寬度的情況下，會自動填滿整行。
如果把border叫出來，就會很明顯。
例如：

  • 填滿整行的li
  • 填滿整行的li

可以佐以排版技巧來解決這個問題。

橫向排列：inblock

橫向排列只要指定display就可以解決問題

ul
 li 橫向排列不填滿
 li 橫向排列不填滿
 li 橫向排列不填滿
li
 border: 1px solid #000
 display: inline

Display

  • 橫向排列不填滿
  • 橫向排列不填滿
  • 橫向排列不填滿

縱向排列：float

使用float完成縱向排列

ul
 li 縱向排列不填滿
 li 縱向排列不填滿
 li 縱向排列不填滿
ul
 float: left

li
 border: 1px solid #000

Display

  • 縱向排列不填滿
  • 縱向排列不填滿
  • 縱向排列不填滿

 

注意：周邊元素必須指定clear

如果不指定clear的話，會變成這樣↓↓

  • 縱向排列不填滿
  • 縱向排列不填滿
  • 縱向排列不填滿

這段文字想要放在清單下方，但是跑到左邊來了QQ

 

 

解決法：周邊的元素指定clear。

ul 
 li 縱向排列不填滿 
 li 縱向排列不填滿 
 li 縱向排列不填滿 

p 這段文字想要放在清單下方，成功。
ul
 float: left
li
 border: 1px solid #000

p 
 clear: both 
 //該元素的左邊(left)、右邊(right)、兩邊(both)都不可以有任何東西，若有的話，該元素會自動往下移。

Display

  • 縱向排列不填滿
  • 縱向排列不填滿
  • 縱向排列不填滿
這段文字想要放在清單下方，成功

游標

説明

  1. 用 CSS 刻出游標樣式
  2. 抓取滑鼠位置
  3. 游標的位置隨著滑鼠移動而改變

範例

#cross

#cross
 position: absolute
 &:before,&:after
 content: ""
 display: block
 width: 60px
 height: 15px
 background-color: #fff
 position: absolute
 left: 50%
 top: 50%
 transform: translate(-50%,-50%) rotate(45deg)
 &:after
 transform: translate(-50%,-50%) rotate(-45deg)
window.addEventListener("mousemove", function(evt){
 
 var x=evt.pageX;
 var y=evt.pageY;
 
 cross.style.left=x+"px";
 cross.style.top=y+"px";
})

Display

CODEPEN

CSS not selector

指定不要選到某class的元素

語法：:not(.your-class) 
h1.h1 h111
h1.h2 h222
h1.h3 h333
h1:not(.h1)
 color: red

指定不要選到某attribute的元素

抓取attribute名稱的範例 
h1.h1(data-h1) h111
h1.h2(data-h2) h222
h1.h3(data-h3) h333
h1:not([data-h1])
 color: red
抓取attribute名稱+內容的範例 
h1.h1(data-heading="h1") h111
h1.h2(data-heading="h2") h222
h1.h3(data-heading="h3") h333
h1:not([data-heading="h1"])
 color: red

多重條件

h1.h1 h111
h1.h2 h222
h1.h3 h333
h1
 color: red
 
h1:not(.h2):not(.h3)
 color: black