文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >表格单元格上位置粘滞的元素重叠，z索引不起作用

问表格单元格上位置粘滞的元素重叠，z索引不起作用
EN

Stack Overflow用户
提问于 2021-07-06 19:31:55
回答 1查看 100关注 0票数 3

我有一张桌子：

​

代码语言：javascript
复制
.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);
}
代码语言：javascript
复制
<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中：

代码语言：javascript
复制
/* 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：

代码语言：javascript
复制
<th>
    <div>
        <div class="filler">
            Project Stage
        </div>
    </div>
</th>

和css

代码语言：javascript
复制
.filler {
    position: absolute;
    z-index: 100;
    background: white;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

但这不管用。在HTML中，下一个粘滞元素始终位于前一个粘滞元素的顶部。有没有办法改变粘性元素的顺序？我对任何能让它工作的黑客攻击都很满意。

sticky
html
css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-07-06 23:47:18

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

代码语言：javascript
复制
.level-2 [rowspan] div {
    position: sticky;
    background: white;
    z-index: -100;
    top: calc(var(--line-height) * 1px);
}

在那之后，您会发现标题行需要稍微调整一下，以增加5像素的"table.new th:not(rowspan) div“类的高度

代码语言：javascript
复制
table.new th:not([rowspan]) div {
    z-index: 100;
    background: white;
    height: calc(5+ var(--line-height) * 1px);
}

这是完整的代码片段

代码语言：javascript
复制
.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);
}
代码语言：javascript
复制
<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
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/68269788

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档