Блог

Главная - Вопросы по программированию - Элементы с привязкой положения к ячейкам таблицы перекрываются, и z-индекс не работает

Элементы с привязкой положения к ячейкам таблицы перекрываются, и z-индекс не работает

#html #css #sticky

Вопрос:

У меня есть этот стол:

 .collapsible {
    --line-height: 40;
    overflow-y: scroll;
    height: calc(var(--line-height) * 6px);
    min-height: calc(var(--line-height) * 5px);
    max-height: calc(var(--rows) * (var(--line-height)   1) * 1px);
}
.collapsible table {
    position: relative;
}
.level-2 [rowspan] {
    vertical-align: top;
}
table td,
table th {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
}
table td:not([rowspan]),
table [rowspan] div {
    padding: 8px 0 8px 8px;
}
table.new th:not([rowspan]) {
    position: sticky;
    top: 0;
}
table.new th:not([rowspan]) div {
    z-index: 100;
    background: white;
    height: calc(var(--line-height) * 1px);
}
table.new td:not([rowspan]),
table.new th:not([rowspan]) div,
table [rowspan] div {
    --padding: calc(1px * (var(--line-height) - 20) / 2);
    padding: var(--padding) 8px var(--padding) 8px;
}

.level-2 [rowspan] div {
    position: sticky;
    background: white;
    z-index: 0;
    top: calc(var(--line-height) * 1px);
} 
 <div class="collapsible">
   <table class="new">
        <tr>
            <th><div>Project Stage</div></th>
            <th><div>Terapeutic Area</div></th>
            <th class="right"><div>Year</div></th>
            <th class="right"><div>Percentage Share</div></th>
            <th class="right"><div>Unit Share</div></th>
        </tr>
        <tr class="level-2 agragated-2-row">
            <th rowspan="9" class="level-0"><div>DEV</div></th>
            <td rowspan="3"><div>Cancer Immunology</div></td>
            <td>2020</td>
            <td>4%</td>
            <td>16</td>
        </tr>
        <tr class="level-2">
            <td>2019</td>
            <td>1%</td>
            <td>2</td>
        </tr>
        <tr class="level-2">
            <td>2018</td>
            <td>2%</td>
            <td>8</td>
        </tr>
        <tr class="level-2 agragated-1-row">
            <td rowspan="3"><div>Immunology</div></td>
            <td>2020</td>
            <td>4%</td>
            <td>16</td>
        </tr>
        <tr class="level-2">
            <td>2019</td>
            <td>1%</td>
            <td>2</td>
        </tr>
        <tr class="level-2">
            <td>2018</td>
            <td>2%</td>
            <td>8</td>
        </tr>
        <tr class="level-2 agragated-1-row">
            <td rowspan="3"><div>Infectious Diseases</div></td>
            <td>2020</td>
            <td>4%</td>
            <td>16</td>
        </tr>
        <tr class="level-2">
            <td>2019</td>
            <td>1%</td>
            <td>2</td>
        </tr>
        <tr class="level-2">
            <td>2018</td>
            <td>2%</td>
            <td>8</td>
        </tr>
        <tr class="level-2 agragated-2-row">
            <th rowspan="6" class="level-0"><div>ED</div></th>
            <td rowspan="3"><div>Cancer Immunology</div></td>
            <td>2020</td>
            <td>4%</td>
            <td>16</td>
        </tr>
        <tr class="level-2">
            <td>2019</td>
            <td>1%</td>
            <td>2</td>
        </tr>
        <tr class="level-2">
            <td>2018</td>
            <td>2%</td>
            <td>8</td>
        </tr>
        <tr class="level-2 agragated-1-row">
            <td rowspan="3"><div>Immunology</div></td>
            <td>2020</td>
            <td>4%</td>
            <td>16</td>
        </tr>
        <tr class="level-2">
            <td>2019</td>
            <td>1%</td>
            <td>2</td>
        </tr>
        <tr class="level-2">
            <td>2018</td>
            <td>2%</td>
            <td>8</td>
        </tr>
    </table>
</div>

Проблема в том, что ячейки таблицы, которые не находятся в заголовке, при прокрутке находятся над ячейками-липучками заголовка.

Итак, в этом CSS:

 /* this is for first row of th */
table.new th:not([rowspan]) div {
    position: sticky;
    background: white;
    z-index: 100;
}
/* this is for rowspan that is sticky, they are below first row */
.level-2 [rowspan] div {
    position: sticky;
    background: white;
    z-index: 0;
}

z-индекс игнорируется. А при добавлении отрицательного z-индекса ячейки исчезают.

Я пытался поставить div:

 <th>
    <div>
        <div class="filler">
            Project Stage
        </div>
    </div>
</th>

и css

 .filler {
    position: absolute;
    z-index: 100;
    background: white;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Но это не работает. Следующий липкий элемент всегда находится поверх предыдущего липкого элемента в HTML. Есть ли способ изменить порядок липких элементов?
Я доволен любым хак, который делает эту работу.

Ответ №1:

установите класс z-индекса «level-2 [rowspan] div» со значением -100, это приведет к тому, что этот элемент будет отправлен обратно из всех других элементов

 .level-2 [rowspan] div {
    position: sticky;
    background: white;
    z-index: -100;
    top: calc(var(--line-height) * 1px);
}

и после этого вы обнаружите, что строка заголовка нуждается в небольшой корректировке, чтобы увеличить высоту «таблицы.новый класс th:не([размах строк]) div» с размером 5 пикселей

 table.new th:not([rowspan]) div {
    z-index: 100;
    background: white;
    height: calc(5  var(--line-height) * 1px);
}

это полный фрагмент кода

 .collapsible {
    --line-height: 40;
    overflow-y: scroll;
    height: calc(var(--line-height) * 6px);
    min-height: calc(var(--line-height) * 5px);
    max-height: calc(var(--rows) * (var(--line-height)   1) * 1px);
}
.collapsible table {
    position: relative;
}
.level-2 [rowspan] {
    vertical-align: top;
}
table td,
table th {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
}
table td:not([rowspan]),
table [rowspan] div {
    padding: 8px 0 8px 8px;
}
table.new th:not([rowspan]) {
    position: sticky;
    top: 0;
}
table.new th:not([rowspan]) div {
    z-index: 100;
    background: white;
    height: calc(5  var(--line-height) * 1px);
}
table.new td:not([rowspan]),
table.new th:not([rowspan]) div,
table [rowspan] div {
    --padding: calc(1px * (var(--line-height) - 20) / 2);
    padding: var(--padding) 8px var(--padding) 8px;
}

.level-2 [rowspan] div {
    position: sticky;
    background: white;
    z-index: -100;
    top: calc(var(--line-height) * 1px);
} 
 <div class="collapsible">
   <table class="new">
        <tr>
            <th><div>Project Stage</div></th>
            <th><div>Terapeutic Area</div></th>
            <th class="right"><div>Year</div></th>
            <th class="right"><div>Percentage Share</div></th>
            <th class="right"><div>Unit Share</div></th>
        </tr>
        <tr class="level-2 agragated-2-row">
            <th rowspan="9" class="level-0"><div>DEV</div></th>
            <td rowspan="3"><div>Cancer Immunology</div></td>
            <td>2020</td>
            <td>4%</td>
            <td>16</td>
        </tr>
        <tr class="level-2">
            <td>2019</td>
            <td>1%</td>
            <td>2</td>
        </tr>
        <tr class="level-2">
            <td>2018</td>
            <td>2%</td>
            <td>8</td>
        </tr>
        <tr class="level-2 agragated-1-row">
            <td rowspan="3"><div>Immunology</div></td>
            <td>2020</td>
            <td>4%</td>
            <td>16</td>
        </tr>
        <tr class="level-2">
            <td>2019</td>
            <td>1%</td>
            <td>2</td>
        </tr>
        <tr class="level-2">
            <td>2018</td>
            <td>2%</td>
            <td>8</td>
        </tr>
        <tr class="level-2 agragated-1-row">
            <td rowspan="3"><div>Infectious Diseases</div></td>
            <td>2020</td>
            <td>4%</td>
            <td>16</td>
        </tr>
        <tr class="level-2">
            <td>2019</td>
            <td>1%</td>
            <td>2</td>
        </tr>
        <tr class="level-2">
            <td>2018</td>
            <td>2%</td>
            <td>8</td>
        </tr>
        <tr class="level-2 agragated-2-row">
            <th rowspan="6" class="level-0"><div>ED</div></th>
            <td rowspan="3"><div>Cancer Immunology</div></td>
            <td>2020</td>
            <td>4%</td>
            <td>16</td>
        </tr>
        <tr class="level-2">
            <td>2019</td>
            <td>1%</td>
            <td>2</td>
        </tr>
        <tr class="level-2">
            <td>2018</td>
            <td>2%</td>
            <td>8</td>
        </tr>
        <tr class="level-2 agragated-1-row">
            <td rowspan="3"><div>Immunology</div></td>
            <td>2020</td>
            <td>4%</td>
            <td>16</td>
        </tr>
        <tr class="level-2">
            <td>2019</td>
            <td>1%</td>
            <td>2</td>
        </tr>
        <tr class="level-2">
            <td>2018</td>
            <td>2%</td>
            <td>8</td>
        </tr>
    </table>
</div>

Комментарии:

1. Спасибо, но было бы неплохо, если бы вы описали, что вы изменили. Я пытался получить отрицательный z-индекс, но ячейка исчезала.

2. я увеличиваю высоту стола. новый th:не([диапазон строк]) div на 5, чтобы скрыть фон также в этом классе высота: calc(5 var(—высота строки) * 1 пикселей);

3. Но вы должны написать это в ответе, а не в комментарии. Кроме того, эти изменения не имеют большого значения, решающее значение имеет z-индекс, который я пытался, но не смог решить проблему. Возможно, z-индекс в сочетании с фоном решил проблему, потому что, когда я использовал отрицательный z-индекс, ячейка исчезла.

4. @MohamedHassan — лучше всего описать, что вы сделали в реальном ответе, а не в комментариях 🙂

Метки: ,