Z-indexが、私は私のリアクトアプリで昨日の問題に遭遇した

Question

リボン、背景や入力のために働いていないが、それは本当にただ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; 
`; 

私はこれはとリボンを作成するために期待しています：リボンの背後にあるELS後：前と。しかし、彼らはそれの上に来る。どういうわけか、私はこの昨日の夜を修正することができました。私は今再作成できません。それにもかかわらず、入力欄を追加した後は、フォームとそのposition: relativeとz-indexを手入力してもクリック可能ではありませんでした。

誰かが私を助けてくれますか？

Answer 1

[OK]を、私は最終的にthis回答ごとに動作するようになった。バックグラウンドにpositionとz-indexを設定する代わりに、divのdiv（position: relativeとz-index: 5）のリボンのみをラップしました。それから私は.ribbon {position: relative;}と.ribbon:before, .ribbon:after {position: absolute; z-index: -2}を持っています。これは、inputがまだ動作する賢い方法です！

誰かを助ける希望。