Блог

Главная - Вопросы по программированию - CSS: абсолютный вложенный липкий элемент

CSS: абсолютный вложенный липкий элемент

#html #css

Вопрос:

У меня есть таблица с последним столбцом sticky, в этом столбце есть абсолютное меню, но абсолютное меню в обратном направлении от столбца sticky. Я хочу, чтобы меню переслало колонку вперед. Я попробовал z-индекс, но он не работал. Пожалуйста, помогите мне! (Извините за мой плохой английский)

Мой кодовый код: кодовый код

 .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>

Ответ №1:

вам нужно добавить z-index в родительский элемент sticky элемент вашего абсолютного элемента:

 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>
Метки: