I'm struggling to position the red square on top of the table. After reading articles about Z-index Stacking Context and browsing through this stack overflow page about overriding CSS Z-Index Stacking Context, I still can't seem to figure it out. It seems like using transform properties might be a solution, but it's not working in my specific case. Any advice would be greatly appreciated. Thanks!
https://i.sstatic.net/SJTob.png
- html
<!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;
}
- stackblitz: Visit this link for interactive demo