#css #z-index #sticky
Вопрос:
У меня есть таблица с липким столбцом. Когда я просматриваю эту таблицу в 3D-средстве просмотра, я вижу, что каждый столбец имеет более высокий z-индекс, чем предыдущий столбец. Поэтому, когда я хочу использовать выпадающий список в этом столбце, он всегда закрывается столбцом в следующей строке.
td {
white-space: nowrap;
}
.fixed-column {
position: fixed;
right: 0;
background-color: white;
padding: .5rem;
}
.dropdown-menu {
position: fixed;
right: 0;
background: #0080ff;
} <table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 6</th>
<th>Col 7</th>
<th>Col 8</th>
<th>Col 9</th>
<th class="fixed-column">Col 10</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1 content with a lot of text ...</td>
<td>Cell 2 content with a lot of text ...</td>
<td>Cell 3 content with a lot of text ...</td>
<td>Cell 4 content with a lot of text ...</td>
<td>Cell 5 content with a lot of text ...</td>
<td>Cell 6 content with a lot of text ...</td>
<td>Cell 7 content with a lot of text ...</td>
<td>Cell 8 content with a lot of text ...</td>
<td>Cell 9 content with a lot of text ...</td>
<td class="fixed-column">
<button type="button">Menu</button>
<div class="dropdown-menu">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li>Option 6</li>
</ul>
</div>
</td>
</tr>
<!-- ... -->
</tbody>
</table> Вот plnkr с примером: http://plnkr.co/plunk/CqqeSWIQrSsSVJB3
Здесь вы можете увидеть скриншот программы просмотра 3d: 
Есть ли какой-либо способ запретить браузеру складывать все эти липкие ячейки по оси z, чтобы выпадающее меню (синий div-контейнер) отображалось поверх всех этих ячеек?
Комментарии:
1. итак, чего вы действительно хотите и как вы хотите, чтобы выглядела ваша страница ….пожалуйста, будьте конкретны
2. Я хочу, чтобы выпадающее меню было поверх всех этих липких ячеек
3. Пожалуйста, обновите свой вопрос, чтобы четко продемонстрировать «» Итак, когда я хочу использовать раскрывающийся список в этом столбце » Какой раскрывающийся список, я не вижу раскрывающегося списка/элемента выбора? Какой столбец конкретно, тот, который у вас есть как «липкий?> (похоже, что это должно быть НЕ в столбце таблицы, а в отдельном элементе, установленном на вашей странице за пределами таблицы. Вы имеете в виду, что когда вы добавляете больше строк, проблема существует/проявляется здесь? ЕСЛИ в этом суть проблемы, вам нужно больше строк, чтобы более четко проиллюстрировать это нежелательное поведение в вашем вопросе.
4. Ладно, я просто упростил это в качестве примера. В каждой строке таблицы должно быть меню для различных действий в этой строке (показать более подробную информацию, отредактировать, удалить и так далее). Мое выпадающее меню-это не элемент выбора, это веб-компонент, который в своей простейшей форме имеет кнопку и div-контейнер. Div-контейнер динамически позиционируется с положением: фиксировано. Я воспроизвел поведение с элементом с именем класса «.выпадающее меню». Проблема в том, что div-контейнер не полностью виден, потому что липкий td-элемент следующей строки находится поверх него и закрывает раскрывающийся элемент.
Ответ №1:
Один из способов добиться этого, при условии, что вы можете динамически задать класс в ячейке, отображающей меню,-это установить z-индекс для этой конкретной ячейки, который будет отображаться поверх следующих:
td {
white-space: nowrap;
}
.fixed-column {
position: fixed;
right: 0;
background-color: white;
padding: .5rem;
}
.dropdown-menu {
position: fixed;
right: 0;
background: #0080ff;
}
.withmenu {
z-index: 1;
} <table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 6</th>
<th>Col 7</th>
<th>Col 8</th>
<th>Col 9</th>
<th class="fixed-column">Col 10</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1 content with a lot of text ...</td>
<td>Cell 2 content with a lot of text ...</td>
<td>Cell 3 content with a lot of text ...</td>
<td>Cell 4 content with a lot of text ...</td>
<td>Cell 5 content with a lot of text ...</td>
<td>Cell 6 content with a lot of text ...</td>
<td>Cell 7 content with a lot of text ...</td>
<td>Cell 8 content with a lot of text ...</td>
<td>Cell 9 content with a lot of text ...</td>
<td class="fixed-column withmenu">
<button type="button">Menu</button>
<div class="dropdown-menu">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li>Option 6</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>Cell 1 content with a lot of text ...</td>
<td>Cell 2 content with a lot of text ...</td>
<td>Cell 3 content with a lot of text ...</td>
<td>Cell 4 content with a lot of text ...</td>
<td>Cell 5 content with a lot of text ...</td>
<td>Cell 6 content with a lot of text ...</td>
<td>Cell 7 content with a lot of text ...</td>
<td>Cell 8 content with a lot of text ...</td>
<td>Cell 9 content with a lot of text ...</td>
<td class="fixed-column">
<button type="button">Menu</button>
</td>
</tr>
<tr>
<td>Cell 1 content with a lot of text ...</td>
<td>Cell 2 content with a lot of text ...</td>
<td>Cell 3 content with a lot of text ...</td>
<td>Cell 4 content with a lot of text ...</td>
<td>Cell 5 content with a lot of text ...</td>
<td>Cell 6 content with a lot of text ...</td>
<td>Cell 7 content with a lot of text ...</td>
<td>Cell 8 content with a lot of text ...</td>
<td>Cell 9 content with a lot of text ...</td>
<td class="fixed-column">
<button type="button">Menu</button>
</td>
</tr>
<tr>
<td>Cell 1 content with a lot of text ...</td>
<td>Cell 2 content with a lot of text ...</td>
<td>Cell 3 content with a lot of text ...</td>
<td>Cell 4 content with a lot of text ...</td>
<td>Cell 5 content with a lot of text ...</td>
<td>Cell 6 content with a lot of text ...</td>
<td>Cell 7 content with a lot of text ...</td>
<td>Cell 8 content with a lot of text ...</td>
<td>Cell 9 content with a lot of text ...</td>
<td class="fixed-column">
<button type="button">Menu</button>
</td>
</tr>
<tr>
<td>Cell 1 content with a lot of text ...</td>
<td>Cell 2 content with a lot of text ...</td>
<td>Cell 3 content with a lot of text ...</td>
<td>Cell 4 content with a lot of text ...</td>
<td>Cell 5 content with a lot of text ...</td>
<td>Cell 6 content with a lot of text ...</td>
<td>Cell 7 content with a lot of text ...</td>
<td>Cell 8 content with a lot of text ...</td>
<td>Cell 9 content with a lot of text ...</td>
<td class="fixed-column">
<button type="button">Menu</button>
</td>
</tr>
<tr>
<td>Cell 1 content with a lot of text ...</td>
<td>Cell 2 content with a lot of text ...</td>
<td>Cell 3 content with a lot of text ...</td>
<td>Cell 4 content with a lot of text ...</td>
<td>Cell 5 content with a lot of text ...</td>
<td>Cell 6 content with a lot of text ...</td>
<td>Cell 7 content with a lot of text ...</td>
<td>Cell 8 content with a lot of text ...</td>
<td>Cell 9 content with a lot of text ...</td>
<td class="fixed-column">
<button type="button">Menu</button>
</td>
</tr>
<tr>
<td>Cell 1 content with a lot of text ...</td>
<td>Cell 2 content with a lot of text ...</td>
<td>Cell 3 content with a lot of text ...</td>
<td>Cell 4 content with a lot of text ...</td>
<td>Cell 5 content with a lot of text ...</td>
<td>Cell 6 content with a lot of text ...</td>
<td>Cell 7 content with a lot of text ...</td>
<td>Cell 8 content with a lot of text ...</td>
<td>Cell 9 content with a lot of text ...</td>
<td class="fixed-column">
<button type="button">Menu</button>
</td>
</tr>
<tr>
<td>Cell 1 content with a lot of text ...</td>
<td>Cell 2 content with a lot of text ...</td>
<td>Cell 3 content with a lot of text ...</td>
<td>Cell 4 content with a lot of text ...</td>
<td>Cell 5 content with a lot of text ...</td>
<td>Cell 6 content with a lot of text ...</td>
<td>Cell 7 content with a lot of text ...</td>
<td>Cell 8 content with a lot of text ...</td>
<td>Cell 9 content with a lot of text ...</td>
<td class="fixed-column">
<button type="button">Menu</button>
</td>
</tr>
</tbody>
</table> Другим решением было бы вынуть меню из <td> и присвоить ему z-индекс, но тогда для этого потребуется динамическое позиционирование… Так что лучшего решения не найти.