子の絶対配置要素にテーブルの境界線が表示されるのはなぜですか？

Question

私の主な目標は、フォーカス要素でポップアップアクションを作ることです。アクションボックスに透明性プロパティがなくても、テーブル境界がアクションボックスに表示されるようです。下の赤いボックスの画像に示されています。私はアクションボックスが完全にテーブル要素の上にあるので、アクションボックスではテーブルの境界線が見えないようにしたい。私はアクション・ボックスでZ-索引を使用しようとしましたが、それは機能しません。ここ

は、アクションボックス

.action { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    position: absolute; 
 
    min-width: 120px; 
 
    top: 5px; 
 
    right: 10px; 
 
    padding-top: 0; 
 
    padding-bottom: 0; 
 
    text-align: left; 
 
    background-color: #fff; 
 
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 15px 0 rgba(0, 0, 0, 0.19); 
 
    -webkit-transition: visibility 0s, opacity 200ms linear; 
 
    -ms-transition: visibility 0s, opacity 200ms linear; 
 
    transition: visibility 0s, opacity 200ms linear; 
 
} 
 

 
.action ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 

 
.action ul li { 
 
    height: 44px; 
 
    padding-left: 22px; 
 
    padding-right: 22px; 
 
} 
 

 
.action ul li a { 
 
    line-height: 44px; 
 
} 
 

 
.action ul li:hover { 
 
    background-color: #f7f4f4; 
 
    cursor: pointer; 
 
} 
 

 
.action-control:hover { 
 
    cursor: pointer; 
 
} 
 

 
.action-control:focus { 
 
    outline: none; 
 
} 
 

 
.action-control:focus+.action { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    z-index: 3; 
 
}

<table> 
 
    <tr> 
 
    <td style="text-align: center"> 
 
     <span style="position: relative"> 
 
     <a tabindex="0" class="action-control"><i class="fa fa-ellipsis-v"></i></a> 
 
     <div class="action"> 
 
      <ul> 
 
      <li><a class="text-menu">Edit</a></li> 
 
      <li><a class="text-menu">Delete</a></li> 
 
      </ul> 
 
     </div> 
 
     </span> 
 
    </td> 
 
    </tr> 
 
</table>

のための私のコードは、任意のは、私のCSSコードで間違っているのですか？私を助けてください。 私はそれが些細な問題だと思っていますが、それでも私の自己によって修正することができます。 ここにはjsfiddle

Answer 1

<tbody>の要素はopacity: 0.84;です。そのように、あなたのポップオーバーを含むすべての子供たちも、その不透明さにあります。これが間違いであるか、これで何かを達成しようとしているのかどうかは分かりません。後者の場合は、rgbaを使用して関連する要素を背景色でターゲティングすることをお勧めします。これはポップアップのbackground-colorで簡単にオーバーライドする必要があります。