sass – scss – 管理複雜的 z-index 方法

2016-12-08 / JSN / 0 Comments / 181 次瀏覽

當圖層一多起來，要管理 z-index 是很麻煩的一件事。但是可以透過這個方法來管理：

依照 z-index 的大小做順序排列

$z-index: 
(
    container, 
    '.header', 
    "#title"
);

然後利用 SASS 的 index() 方法來自動取得 z-index

// z-index:1
.container {
 z-index: index($z-index, container);
}

// z-index:2
.header {
 z-index: index($z-index, '.header');
}

// z-index:3
#title {
 z-index: index($z-index, '#title');
}