Why does the position sticky and z-index does not work properly on table?
So i did this demo https://codepen.io/H4ds0n/pen/gOKGEVX
My goal was to take the first row and its first cell (the one with "XD" button) and put it over second row's first cell. But it seems that z-index over td are not respected. Could you explain my why?
21 Replies
But when i put position relative and z-index on parent seems to be working
my question is then, why there is a problem with "td" ?
is this what you're trying to do?
Not exacly, I want this row to have height: 0 and show button on hover
and the button should be between two rows
do you have any picture that shows it?
like someone did it before
probably terrible pain design
but wanted to do something like this
where this red line and (+) button is just the row with height: 0
and when you hover the button show?
when i hover in the space between rows
yes
the button + red line
full width
give me second
the problem is that first left column needs to be sticky and scrollable
and this breaks everything because making this sicky ignores completly z-index
like this?
the idea was that when the "XD" is visible it is not between two rows
but over them
am not sure how that works but your html needs little help
<style>
button{
width: 100%;
display: none;
}
table:hover button{
display: table-cell;
vertical-align: inherit;
}
</style>
<table border="1">
<tr>
<th>first</th>
<th>second</th>
</tr>
<tr>
<td>Rest of row</td>
<td>Rest of row</td>
</tr>
<tr style="border: red;"><td colspan="2"><button>XD</button></td></tr>
<tr>
<td>The table body</td>
<td>The table body</td>
</tr>
</table>
this is the one on that picture use it as reference to your problem your table is all on top of each other
If i assume that this read line + button is another row
then it need to be over to allow button to cover the two rows
I put an example just to show the problem I had
my button (the red circle) was in first td
which should have cover the second row's first td
because it had z-index:2 and second row first td had z-index 1
but seems that those z-indexes are completly ignored from som known reason
when i tried the same with div's instead table
it worked as it should
here take a look
the idea was to put this row under those two
and z-index red button over
The important was this red button
I wanted to have it overt part of last row and part of the next one