在固定位置的元素前面的Z索引

這裏是上下文：我有兩個兄弟元素，一個是絕對位置，另一個是固定位置。固定元素基本始終位於頂部。考慮下面的代碼：

* { 
 
    box-sizing: border-box; 
 
} 
 
html, body{ 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#element1 { 
 
    background: red; 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
} 
 
#element2 { 
 
    background: green; 
 
    margin: 0 auto; 
 
    height: 200px; 
 
    position: absolute; 
 
    width: 600px; 
 
} 
 
#element3 { 
 
    background: blue; 
 
    height: 200px; 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
} 
 

 
#element1, 
 
#element3 { 
 
    z-index: 1; 
 
} \t 
 
#element2 { 
 
    z-index: 10; 
 
}

<div id="element1"> 
 
    <div> 
 
    <div id="element2"></div> 
 
    </div> 
 
</div> 
 
<div id="element3"> 
 

 
</div>

http://jsfiddle.net/P7c9q/1162/

那綠色區域是一個模式。我的目標是讓元素在固定位置上的元素上變綠。

如何知道元素1和元素2必須保持絕對位置才能解鎖自己？

謝謝你，親切。

來源

2017-07-28 Jimmy.D

element3總是會在element1及其所有子即使element1孩子有更高的z-index，因爲它終於與其父element1其具有較低z-index比element3

這種情況有兩種解決方案：

放element2和element3作爲孩子element1

* { 
 
    box-sizing: border-box; 
 
} 
 
html, body{ 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#element1 { 
 
    background: red; 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
} 
 
#element2 { 
 
    background: green; 
 
    margin: 0 auto; 
 
    height: 200px; 
 
    position: absolute; 
 
    width: 600px; 
 
} 
 
#element3 { 
 
    background: blue; 
 
    height: 200px; 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
} 
 

 
#element1, 
 
#element3 { 
 
    z-index: 1; 
 
} \t 
 
#element2 { 
 
    z-index: 10; 
 
}

<div id="element1"> 
 
    <div> 
 
    <div id="element2"></div> 
 
    </div> 
 
    <div id="element3"> 
 

 
    </div> 
 
</div>

使element2外element1在相同的水平與element3

* { 
 
    box-sizing: border-box; 
 
} 
 
html, body{ 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#element1 { 
 
    background: red; 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
} 
 
#element2 { 
 
    background: green; 
 
    top:25%; 
 
    left:15%; 
 
    margin: 0 auto; 
 
    height: 200px; 
 
    position: fixed; 
 
    width: 600px; 
 
} 
 
#element3 { 
 
    background: blue; 
 
    height: 200px; 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
}

<div id="element1"></div> 
 
<div id="element2"></div> 
 
<div id="element3"></div>

來源

2017-07-28 08:54:40

我會在元素二中發送元素三，這對我的問題更合適，非常感謝您的幫助。 –

這將做

* { 
 
    box-sizing: border-box; 
 
} 
 
html, body{ 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#element1 { 
 
    background: red; 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
} 
 
#element2 { 
 
    background: green; 
 
    top:25%; 
 
    left:15%; 
 
    margin: 0 auto; 
 
    height: 200px; 
 
    position: fixed; 
 
    width: 600px; 
 
} 
 
#element3 { 
 
    background: blue; 
 
    height: 200px; 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
}

<div id="element1"> 
 
    <div> 
 
    <div id="element2"></div> 
 
    </div> 
 
</div> 
 
<div id="element3"> 
 

 
</div>

來源

2017-07-28 08:52:02 Owais

這也是一個解決方案，但在固定的我不能改變元件2的位置。感謝您的幫助。 –

在固定位置的元素前面的Z索引

回答

相關問題