Nested div doesn't overlap parent's siblings - html

Question

I have a very convoluted table in which I have to add a menu that appears on hover and has its position based on each row's position.
Every row is generated at the same time in a loop (React props.map), so changing the next row z-index is possible, but I don't know if I should.
I managed to do some work, but I can't seem to make the menu appear on top of the "th" other than its parent.
I know it (probably) has to do with the Stacking Context, but I don't know how to fix this.
This fiddle represents a very resumed version of the table: https://jsfiddle.net/4n9bj16x/2/
I tried a lot of things, and some worked but then it broke something else. What I need is a way of maintaining the first column fixed and make this menu overlap all "th" siblings.
Things that worked but broke something else:
Taking the "sticky" position out of the "th", the menu will overlap perfectly, but then it break the fixed first column.
Make the menu relative positioned, then it enters the normal flow, but that makes the div grow in and out.
Remove the "th" background-color property, but then it becomes invisible and, when the table is scrolled, you can see all the other columns underneath.
Thanks in advance!
PS: The original table is coded in React and SCSS, if this is of any help.
HTML & CSS: (the fiddle is written in scss because its easier to read)
.overflowTable {
overflow-x: scroll;
margin-left: 0;
overflow-y: visible;
padding: 0;
position: relative;
height: 100vh;
}
table {
border-collapse: separate;
}
tr {
background-color: white;
}
th {
border-right: 2px solid #eee;
font-weight: 600;
color: #333;
left: 0;
position: sticky;
z-index: 2;
background-color: inherit;
}
tbody tr:hover {
background-color: #fafafa;
}
tbody th {
cursor: pointer;
}
tbody td {
cursor: grab;
}
tbody td:active {
cursor: grabbing;
}
.headerTable {
font-family: "Open-sans", sans-serif;
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 25px;
color: #666;
border-bottom: 2px solid #eee;
padding: 10px 30px;
min-width: 150px;
}
.content {
padding: 10px 30px;
}
.content .actualMenu {
visibility: hidden;
}
.content .menuMore {
position: absolute;
width: 250px;
visibility: hidden;
right: 0;
background-color: #333;
color: white;
box-shadow: 0 4px 2px rgba(0, 0, 0, 0.1), 4px 4px 10px rgba(0, 0, 0, 0.1);
}
.content:hover .actualMenu, .content:hover .menuMore {
visibility: visible;
}
.content .title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.content .title .name {
flex: 1;
}
.content .title .moreOptions {
position: relative;
flex: 0;
}
<div class="overflowTable">
<table>
<thead>
<tr>
<th class="headerTable">
Name
</th>
<td class="headerTable">
Status
</td>
<td class="headerTable">
People
</td>
<td class="headerTable">
Date
</td>
</tr>
</thead>
<tbody>
<tr>
<th class="content">
<div class="title">
<div class="name">
Name
</div>
<div class="moreOptions">
<span class="actualMenu">...</span>
<div class="menuMore"> Options<br/>
Options<br/>
Options<br/>
Options<br/>
Options<br/>
</div>
</div>
</div>
</th>
<td class="content">
Status
</td>
<td class="content">
First Person
</td>
<td class="content">
Random Date
</td>
</tr><tr>
<th class="content">
<div class="title">
<div class="name">
Name
</div>
<div class="moreOptions">
<span class="actualMenu">...</span>
<div class="menuMore"> Options<br/>
Options<br/>
Options<br/>
Options<br/>
</div>
</div>
</div>
</th>
<td class="content">
Status
</td>
<td class="content">
First Person
</td>
<td class="content">
Random Date
</td>
</tr>
</tbody>
</table>
</div>

Answer 1

FIRST ANSWER:
You have to remove background-color: inherit; from th.
w3schools resource:
The inherit keyword specifies that a property should inherit its value from its parent element.
UPDATE:
First of all, sorry for misunderstanding,
You gave z-index: 2; to .content class. Its mean all .content elements have equal index. You can fix this and add another way. Go second row and add z-index: 3; then you will understand me. :)
here is fiddle
<th class="content" style="z-index: 3!important;">
Sorry for my bad english.

Answer 2

On hover change tr's and th's z-index
.overflowTable {
overflow-x: scroll;
margin-left: 0;
overflow-y: visible;
padding: 0;
position: relative;
height: 100vh;
}
table {
border-collapse: separate;
}
tr {
background-color: white;
position: relative;
z-index: 1;
}
tr:hover {
z-index: 2;
}
tr:hover th {
z-index: 3;
}
th {
border-right: 2px solid #eee;
font-weight: 600;
color: #333;
left: 0;
position: sticky;
z-index: 2;
background-color: inherit;
}
tbody tr:hover {
background-color: #fafafa;
}
tbody th {
cursor: pointer;
}
tbody td {
cursor: grab;
}
tbody td:active {
cursor: grabbing;
}
.headerTable {
font-family: "Open-sans", sans-serif;
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 25px;
color: #666;
border-bottom: 2px solid #eee;
padding: 10px 30px;
min-width: 150px;
}
.content {
padding: 10px 30px;
}
.content .actualMenu {
visibility: hidden;
}
.content .menuMore {
position: absolute;
width: 250px;
visibility: hidden;
right: 0;
background-color: #333;
color: white;
box-shadow: 0 4px 2px rgba(0, 0, 0, 0.1), 4px 4px 10px rgba(0, 0, 0, 0.1);
}
.content:hover .actualMenu, .content:hover .menuMore {
visibility: visible;
}
.content .title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.content .title .name {
flex: 1;
}
.content .title .moreOptions {
position: relative;
flex: 0;
}
<div class="overflowTable">
<table>
<thead>
<tr>
<th class="headerTable">
Name
</th>
<td class="headerTable">
Status
</td>
<td class="headerTable">
People
</td>
<td class="headerTable">
Date
</td>
</tr>
</thead>
<tbody>
<tr>
<th class="content">
<div class="title">
<div class="name">
Name
</div>
<div class="moreOptions">
<span class="actualMenu">...</span>
<div class="menuMore"> Options<br/>
Options<br/>
Options<br/>
Options<br/>
Options<br/>
</div>
</div>
</div>
</th>
<td class="content">
Status
</td>
<td class="content">
First Person
</td>
<td class="content">
Random Date
</td>
</tr><tr>
<th class="content">
<div class="title">
<div class="name">
Name
</div>
<div class="moreOptions">
<span class="actualMenu">...</span>
<div class="menuMore"> Options<br/>
Options<br/>
Options<br/>
Options<br/>
</div>
</div>
</div>
</th>
<td class="content">
Status
</td>
<td class="content">
First Person
</td>
<td class="content">
Random Date
</td>
</tr>
</tbody>
</table>
</div>