html - Z-index 不适用于功能区、背景和输入

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 els。然而，他们超越了它。不知何故，我昨天晚上设法解决了这个问题，现在我无法重新创建。然而，一旦我添加了一个输入字段，它就无法点击，即使我摆弄了表单及其 position: relative 和 z-index。

有人可以帮帮我吗？

Answer 1

好的，我终于按照 this 让它工作了回答。我没有在背景 div 上设置 position 和 z-index，而是只包裹了丝带(在 div 使用 position: relative 和 z-index: 5)。然后我有 .ribbon {position: relative;} 和 .ribbon:before, .ribbon:after {position: absolute; z 索引:-2}。这是一个聪明的方法，input 仍然有效!

希望对某人有所帮助。