Z 索引不适用于功能区、背景和输入

Question

我昨天在我的 React 应用程序中遇到了一个问题，但它实际上只是 HTML：

我正在制作一个带有背景、输入和功能区的应用程序。这是我的功能区的代码：

const MyRibbon = styled.div`
background: ${blueLight};
color: white;
display: inline-block;
font-family: Roboto, sans-serif;
font-weight: bold;
font-size: 13px;
padding: 8px 16px;
position: relative;
margin: 0;
text-align: center;
z-index: 1;
&:before, &:after {
content: "";
width: 50px;
bottom: -5px;
position: absolute;
display: block;
border: 14px solid ${blueDark};
z-index: -1;  
}
&:before {
left: -40px;
border-right-width: 12px;
border-left-color:transparent;
}
&:after {
right: -40px;
border-left-width: 12px;
border-right-color:transparent;
}
`;

这是我的背景代码：

const Div = styled.div`
background-color: rgb(242,242,242);
font-family: Roboto, sans-serif;
height: 100%;
position: relative;
text-align: center;
z-index: -1000;
`;

我希望这会在功能区后面创建一个带有 ：before 和 ：after el 的功能区。但是，他们出现在它之上。不知何故，我设法在昨天前夕修复了这个问题，我现在无法重新创建。然而，一旦我添加了一个输入字段，它就不可点击，即使我摆弄表单及其position: relative和z-index。

有人可以帮我吗？

Answer 1

好的，我终于按照这个答案让它工作了。我没有在背景div上设置position和z-index，而是只包裹了功能区(在带有position: relative和z-index: 5的div中(。然后我有.ribbon {position: relative;}和.ribbon:before, .ribbon:after {position: absolute; z-index: -2}.这是一种聪明的方法，因此input仍然有效！

希望对某人有所帮助。