CODEWITHSUNDEEP
htmlcss
Nnee
Nnee

Reputation: 23

CSS: absolute element nested sticky element

I have table with last sticky column, this column have a absolute menu, but the absolute menu backward the sticky column. I want the menu forward the column. I tried z-index but not working. Please help me! (Sorry my bad 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>

Upvotes: 2

Views: 270

Answers (1)

Temani Afif
Temani Afif

Reputation: 272965

you need to add z-index to the sticky element parent of your absolute element:

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 {
  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 z-index">
              . . .
              <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>

Upvotes: 1

Related Questions