Can I show the content of TD on top?

Question

I show a table, which shall represent the fretboard of a guitar.

When the class "selected" is applied, a yellow dot is printed on the cell. When the cell is hovered over, the text of the cell becomes visible (=change of color) If both classes are applied, the dot covers the text. I would like to see the text over the dot. How can this be done?

Here is my sample code:

table {
    background: black;
}
td {
    position: relative;
    width: 40;
    text-align: center;
}
td.selected::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 15%;
    background: yellow;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    z-index: 1;    
}

td.show {       
    color: red;     
}

<table>
    <tr>
        <td class="show selected">A</td>
    </tr>
</table>

[How to create a Minimal, Reproducible Question](https://stackoverflow.com/help/minimal-reproducible-example) You should not just request a ready solution. SO is for helping solve specific errors, after you've shown your effort solving them. Posting only the CSS is not enough for anyone to replicate your issue, and see the error you are trying to solve.... — Ron, Apr 01 '23 at 08:23

score 1 · Answer 1 · answered Apr 01 '23 at 09:46

A negative z-index to the yellow circle and any value of z-index to the td element

Related: Why can't an element with a z-index value cover its child?

table {
  background: black;
}

td {
  position: relative;
  z-index: 0;
  width: 40;
  text-align: center;
}

td.selected::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 15%;
  background: yellow;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  z-index: -1;
}

td.show {
  color: red;
}

<table>
  <tr>
    <td class="show selected">A</td>
  </tr>
</table>

score 0 · Accepted Answer · answered Apr 01 '23 at 09:20

The simplest solution would be to wrap the text within the table cell in another element. You can then target this element and give it a z-index greater than the table cell's ::before element.

For example you could wrap it in a <span> element and then target td > span in your CSS to change the z-index.

table {
    background: black;
}
td {
    position: relative;
    width: 40;
    text-align: center;
}
td > span {
    position: relative;
    z-index: 10;
}
td.selected::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 15%;
    background: yellow;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    z-index: 1;    
}

td.show {       
    color: red;     
}

<table>
    <tr>
        <td class="show selected"><span>A</span></td>
    </tr>
</table>

Can I show the content of TD on top?

2 Answers2