Задать z-index для скроллбара или вывести дочерний элемент выше скроллбара родителя

Question

В примере в table1, как сделать чтобы скролл при ховере был под
красной полоской?
Красная полоска для ресайза ячеек, цвет только для наглядности, его не будет.
В таблице 2, сделал как должно быть в идеале. Но в tr нельзя воткнуть ничего кроме td или псевдо элементов, а с псевдо элементами не хотелось бы связываться. И для tr не работает position: relative;, поэтому нужно будет отслеживать высоту ячейки чтобы задать это значение для красной полоски через transform: translateY(var);

table {
  border-collapse: collapse;
  margin-bottom: 15px;
  position: relative;
}

td {
  max-width: 100px;
  height: 30px;
  padding: 17px 10px;
  border: solid 1px black;
  position: relative;
  background: #fff;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
}

td:hover {
  overflow-x: overlay;
}

.table1 td div {
  width: 100%;
  height: 4px;
  background: red;
  position: absolute;
  left: 0px;
  bottom: 0px;
  cursor: n-resize;
  z-index: 999;
}

.table2 tr::after {
  content: "";
  width: 100%;
  height: 4px;
  background: red;
  position: absolute;
  left: 0px;
  transform: translateY(61px);
  cursor: n-resize;
  z-index: 999;
}

<table class="table1">
  <tr>
    <td>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, eligendi?
      <div></div>
    </td>
  </tr>
  <tr>
    <td>
      two
      <div></div>
    </td>
  </tr>
</table>

<table class="table2">
  <tr>
    <td>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, eligendi?
    </td>
  </tr>
  <tr>
    <td>
      two
    </td>
  </tr>
</table>

css scroll

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, eligendi?

two

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, eligendi?

two

Vasily · Answer

Отталкиваясь от задач обозначенных в Вашем комментария варианты следующие:
Если Вам нужен scrollbar, то изменить его слой относительно контента документа не получиться так как этот момент управляется исключительно браузером.
Он служит целям Accessibility и позволят пользователям понимать что в этом месте документа контент шире и/или выше чем границы блока или viewport'a.
Вы можете отключить его отображение:
// для Webkit браузеров

::-webkit-scrollbar {
    display: none;
}

// для всех остальных
// или если Webkit-вариант не срабатывает корректно
// в этом случае нужно будет дополнительно обернуть элемент 
// и сделать его выше, чем родитель, через добавление отступа

.parent {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.child {
    overflow-y: scroll;    
    width: 100%;
    height: 100%;
    padding-right: 20px;
}

Либо изменить Ваш макет/дизайн сделав полоску чуть выше и/или более заметной.

Задать z-index для скроллбара или вывести дочерний элемент выше скроллбара родителя

One Answer

Add your own answers!

Ask a Question