I am facing an issue with a table that has a sticky column, and the absolute menu within it is appearing behind the sticky column instead of in front. I have tried adjusting the z-index property but it didn't work. Can someone please assist me with this? (Apologies for my poor English)
My codepen: codepen
.sticky {
position: sticky;
right: 0;
background-color: yellow;
}
.menu {
position: absolute;
left: 0;
background-color: red;
z-index: 1;
}
body {
margin: 0;
}
.wrapper {
overflow-x: auto;
position: relative;
white-space: nowrap;
max-width: 600px;
}
th,
td {
min-width: 300px;
text-align: center;
}
th:last-child,
td:last-child {
min-width: 50px !important;
}
.sticky {
position: sticky;
right: 0;
background-color: yellow;
}
.menu {
position: absolute;
left: 0;
background-color: red;
z-index: 1;
}<body>
<div class="wrapper">
<table>
<thead>
<tr>
<th>Col</th>
<th>Col</th>
<th>Col</th>
<th class="sticky">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>-----------------------------------</td>
<td>-----------------------------------</td>
<td>-----------------------------------</td>
<td class="sticky">
. . .
<div class="menu">
<div>item</div>
<div>item</div>
<div>item</div>
</div>
</td>
</tr>
<tr>
<td>-----------------------------------</td>
<td>-----------------------------------</td>
<td>-----------------------------------</td>
<td class="sticky">. . .</td>
</tr>
<tr>
<td>-----------------------------------</td>
<td>-----------------------------------</td>
<td>-----------------------------------</td>
<td class="sticky">. . .</td>
</tr>
</tbody>
</table>
</div>
</body>