How to override CSS Z-Index Stacking Context with Transform?

Issue

I’m trying to make the red square on top of the table. I read the articles about Z-index Stacking Context and this stack overflow Override CSS Z-Index Stacking Context.
I guess there’s a way to solve it using the transform stuff. But it’s not working in my case. It would be helpful if you had some advice. Thanks.

enter image description here

  • 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;
}

Solution

Here you can try this logic : i have modified the css , just added z-index at the last line of div :first-child.

[![enter image description here][1]][1]

[1]:

<!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>
  <style>
    .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 {
      z-index: -1;
      transform-style: preserve-3d;
    }
  </style>
  <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>

m/Rxs7O.png

Answered By – jerry

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published