在 table 单元格上具有粘性位置的元素重叠并且 z-index 不起作用

Question

我有这个 table:

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

问题是当您滚动时 table 不在 header 中的单元格位于 header 粘性单元格上方。

所以在这个 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-index 被忽略。当添加负数 z-index 时，细胞会消失。

我试过 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 中，下一个粘性元素始终位于前一个粘性元素之上。有没有办法改变粘性元素的顺序？我对任何使这项工作成功的技巧感到满意。

Answer 1

设置 z-index "level-2 [rowspan] div" class 值为 -100 这将强制将此元素发送回所有其他元素

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

之后，你会发现header行需要稍微调整一下，增加“table.newth:not([rowspan])div的高度" class 5 px

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>

在 table 单元格上具有粘性位置的元素重叠并且 z-index 不起作用

Elements with position sticky on table cells overlaps and z-index doesn't work

html

css

sticky