CSS - 相対的な要素は別の要素を隠す

Question

私はいくつかの要素を持っています<table>。私はただ1つのCSSプロパティ（position: relative;）でスタイリングしています。しかし、2つのテーブル要素のスタイルが設定されている場合、そのうちの1つが別のテーブル要素によって隠されているため、その理由がわかりません。私は左側にあるz-index: 1;を使うことができましたが、それを解決する最善の方法ではないと私は信じています。オーバーフローと可視性のプロパティを試しましたが、いずれも機能していません。

link

Answer 1

私たちはあなたのコードを共有する必要があるので、問題がどこにある我々が特定できることに注意してください。しかし、私はあなたを助けようとします。

position: absoluteの青いストライプの場合は、position: relativeコンテナを使用しているとイメージから判断します。

この場合、z-indexを相対的な要素から削除し、position: absoluteにのみ設定してください（下の例を参照）。

.relative { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    background: white; 
 
} 
 

 
.absolute { 
 
    position: absolute; 
 
    top: 5px; 
 
    left: 20px; 
 
    width: 100px; 
 
    height: 20px; 
 
    background: red; 
 
    z-index: 100; 
 
}

<table> 
 
    <tr> 
 
    <td class="relative"> 
 
     <div class="absolute"></div> 
 
    </td> 
 
    <td class="relative"> 
 
     <div class="absolute"></div> 
 
    </td> 
 
    </tr> 
 
</table>