此问题在此处已有答案：
Why can't an element with a z-index value cover its child?（5个答案）
2天前关闭。
我想把红色方块放在表的顶部。我读过关于Z索引堆栈上下文和这个堆栈溢出Override CSS Z-Index Stacking Context的文章。我想有一种方法可以用变换的东西来解决它。但是在我的情况下它不起作用。如果你有一些建议的话会很有帮助的。谢谢。
- 超文本标记语言
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles.css" />
<script type="module" src="script.js"></script>
</head>
<body>
<div class="top">
<table>
<thead>
<tr>
<th colspan="2">The table header</th>
</tr>
</thead>
<tbody>
<tr>
<td>The table body</td>
<td>with two columns</td>
</tr>
</tbody>
</table>
</div>
<div class="bottom">
<div>
<div><span class="red">Red</span></div>
<div><span class="green">Green</span></div>
<div><span class="blue">Blue</span></div>
</div>
</div>
</body>
</html>- CSS
.top {
z-index: 2;
position: relative;
}
.bottom {
z-index: 1;
position: relative;
}
table,
td {
border: 1px solid #333;
z-index: 4;
position: relative;
background-color: #fff;
}
thead,
tfoot {
background-color: #333;
color: #fff;
}
.red,
.green,
.blue {
position: absolute;
width: 100px;
color: white;
line-height: 100px;
text-align: center;
}
.red {
z-index: 111;
top: -40px;
left: 20px;
background: red;
transform: translateZ(1px);
}
.green {
top: -20px;
left: 60px;
background: green;
}
.blue {
top: -10px;
left: 100px;
background: blue;
}
body,
div:first-child {
transform-style: preserve-3d;
}
3条答案
按热度按时间yqkkidmi1#
在这里你可以试试这个逻辑：我已经修改了css，只是在div：first-child的最后一行添加了z-index。
[！[在此处输入图像说明][1]][1]
[1]：
m/Rxs7O.png
w6mmgewl2#
我通过注解掉你的一些CSS来得到你想要的东西。我没有添加任何新的东西。
请参阅下面的代码片段或查看my fork of your stackblitz。
第一个
uxhixvfz3#
第一个
编辑了你的一些代码，z-index也接受负数，并删除了代码：
https://jsfiddle.net/d3x746bc/1/