0
昨天我在我的应用程序做出反应遇到了一个问题,但它实际上只是HTML:Z-指数不工作的丝带,背景和输入
我在做一个应用程序与背景,以及输入和色带。这里是我的带状代码:
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;
`;
我期待它来创建与丝带:与前:后带条背后ELS 。然而,他们超出了它。不知何故,我设法解决这个昨天的前夕,我现在不能重新创建。尽管如此,一旦我添加了一个输入字段,它将不会被点击,即使在我弄乱了表格和它的position: relative
和z-index
。
有人可以帮我吗?