我创建了一个表格，并在表格的最后一列添加了伪元素。最后一列包含一个图像。该图像由于伪元素而被剪裁。我尝试将 z-index 添加到该图像，但它不起作用。 HTML代码:
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td><img src='https://t4.ftcdn.net/jpg/01/22/05/05/160_F_122050525_sPpYBGxcms3Wpz6tJNnv23Xq7dq60RXi.jpg' height='25'></td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td><img src='https://t4.ftcdn.net/jpg/01/22/05/05/160_F_122050525_sPpYBGxcms3Wpz6tJNnv23Xq7dq60RXi.jpg' height='25'></td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td><img src='https://t4.ftcdn.net/jpg/01/22/05/05/160_F_122050525_sPpYBGxcms3Wpz6tJNnv23Xq7dq60RXi.jpg' height='25'></td>
</tr>
</table>
CSS 代码:
td:nth-child(3):before {
content: '';
width: 100%;
display: block;
border-top: 8px solid white;
position: absolute;
z-index: 1;
}
我在以下 pluker 中重新生成了问题: http://plnkr.co/edit/oTGWJrAFk5esgnwTOvKE?p=preview
如何避免图像被裁剪？ 提前谢谢你。
最佳答案
使用position:relative；图像上的 z-index: 2 堆叠在伪元素之上，即 z-index: 1。如果 z -index 由于某些其他原因，伪元素不是必需的。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
td:nth-child(3):before {
content: '';
width: 100%;
display: block;
border-top: 8px solid white;
position: absolute;
z-index: 1;
}
td img { position: relative; z-index: 2;}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td><img src='https://t4.ftcdn.net/jpg/01/22/05/05/160_F_122050525_sPpYBGxcms3Wpz6tJNnv23Xq7dq60RXi.jpg' height='25'></td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td><img src='https://t4.ftcdn.net/jpg/01/22/05/05/160_F_122050525_sPpYBGxcms3Wpz6tJNnv23Xq7dq60RXi.jpg' height='25'></td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td><img src='https://t4.ftcdn.net/jpg/01/22/05/05/160_F_122050525_sPpYBGxcms3Wpz6tJNnv23Xq7dq60RXi.jpg' height='25'></td>
</tr>
</table>
</body>
</html>关于javascript - 如何将 z-index 应用于 div 的内容以显示在上面的伪元素中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44448404/