如何将 z-index 与伪元素一起使用
[英]How to use z-index with pseudo element
问题描述
How to make the white line behind the yellow line but cover black line?
如何让白线在黄线后面，黑线盖住？ I've tried to add z-index: -1;我试图添加z-index: -1; to the "white line" but it is covered by all element.到“白线”，但它被所有元素覆盖。
And I don't want change the z-index of .outter .而且我不想更改.outter的z-index 。 Because there are other elements like input or button.因为还有其他元素，如输入或按钮。 If I change the z-index to -1, then all the element in .outter can not be used.如果我将 z-index 更改为 -1，则.outter所有元素都无法使用。
Below is my code:下面是我的代码：
li { position: relative; list-style: none; } .outter { background-color: black; } .inner { background-color: yellow; } .inner:before { content: ''; position: absolute; top: 50%; left: -4em; width: 12em; height: 0.2em; background: white; }
<html> <body> <div class="outter"> <ul> <li> <div class="inner">test</div> </li> </ul> <button>button</button> </div> </body> </html>
4 个解决方案
解决方案1
1 已采纳 2019-08-21 06:55:17
li{ position: relative; list-style: none; } .outter{ background-color: black; } .inner{ position: relative; background-color: yellow; z-index: 0; } li::before{ content: ''; position: absolute; top: 50%; left: -4em; width: 12em; height: 0.2em; background: white; } <html> <body> <div class="outter"> <ul> <li> <div class="inner">test</div> </li> </ul> <button>button</button> </div> </body> </html>解决方案2
0 2019-08-21 06:15:43
try like this像这样尝试
li { position: relative; list-style: none; } .outter { background-color: black; position: relative; } .inner { background-color: yellow; z-index: 9; position: relative; } .inner:before { content: ''; position: absolute; top: 50%; left: -4em; width: 12em; height: 0.2em; background: white; z-index: -1; }
<html> <body> <div class="outter"> <ul> <li> <div class="inner">test</div> </li> </ul> <button>button</button> </div> </body> </html>
解决方案3
0 2019-08-21 06:26:35
If you want the white line behind the yellow line, why do you dont do something like that?如果你想要黄线后面的白线，你为什么不这样做呢？
li{ position: relative; list-style: none; } .outter{ background-color: black; } .inner{ background-color: yellow; } .inner:before{ content: ''; position: absolute; top: 50%; left: -4em; width: 4em; height: 0.2em; background: white; }
<html> <body> <div class="outter"> <ul> <li> <div class="inner">test</div> </li> </ul> </div> </body> </html>
解决方案4
0 2019-08-21 06:33:18
li{ position: relative; list-style: none; } .outter{ background-color: black; } .inner{ position: relative; background-color: yellow; z-index:1; } .line{ content: ''; position: absolute; top: 50%; left: -4em; width: 12em; height: 0.2em; background: white; z-index: 0; } <html> <body> <div class="outter"> <ul> <li> <div class="inner">test</div> <div class="line"></div> </li> </ul> <button>button</button> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.