CSS中的層疊效果
阿新 • • 發佈：2019-02-10
引言
在 HTML 中 DOM 節點正常來說是後面出現的會覆蓋在前面出現的上面，現在要求不適用z-index要實現這樣的一個效果：
準備工作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEMP</title>
<style>
.container {
width: 500px;
height: 100px;
border: 5px solid lightgrey 這樣的目前效果是：
層疊規則
- 誰大誰上：當具有明顯的層疊水平標示的時候，如識別的z-indx值，在同一個層疊上下文領域，層疊水平值大的那一個覆蓋小的那一個。通俗講就是官大的壓死官小的。
- 後來居上：當元素的層疊水平一致、層疊順序相同的時候，在DOM流中處於後面的元素會覆蓋前面的元素。
方法1： 使用direction + transform：scale（1）
.container{
direction: rtl;
}
.container li + li{
transform: scale(1);
}對於這個不用 z-index 而具有層疊效果的，並不是只有 transform，還有幾個屬性，可參考張鑫旭的文章：《深入理解CSS中的層疊上下文和層疊順序》
可以改變層疊順序的屬性包括：
- z-index值不為auto的flex項(父元素display:flex|inline-flex).
- 元素的opacity值不是1.
- 元素的transform值不是none.
- 元素mix-blend-mode值不是normal.
- 元素的filter值不是none.
- 元素的isolation值是isolate.
- will-change指定的屬性值為上面任意一個。
- 元素的-webkit-overflow-scrolling設為touch.
方法2：float：right
.container li{
float:right
}方法3：flex
.container {
display: flex;
flex-direction: row-reverse;
}方法4：rotate
.container {
transform: rotate(90deg)
}
.container li {
display: block;
transform: rotate(-90deg) translateY(200px);
margin-bottom: -10px;
margin-left: 0;
}