如何防止绝对位置表头水平溢出？
如何防止绝对位置表头水平溢出？
提问于 2020-10-20 20:05:43
我正在尝试制作一个带有“粘性”表头的表格。我将位置设置为绝对，它就可以工作了，但是现在标题水平溢出了表格边框，甚至覆盖了滚动条。如何才能使元素成为绝对元素，但在视觉上仍然包含在其父元素中？
很难准确地显示我的代码，因为我正在尝试修改Kibana，并且涉及许多不同的文件，但这里是我在简化示例中最好的尝试：
HTML：
<div>
<table>
<thead>
<tr class="headerRow">
<th>...</th>
...
</tr>
<tr class="headerRowInvisible">
<th>...</th>
...
</tr>
</thead>
<tbody>...</tbody>
</table>
</div> CSS：
div {
z-index: auto;
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
min-height: 26px;
position: relative;
}
table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
border-collapse: collapse;
border-spacing: 0;
}
.headerRow {
white-space: nowrap;
position: absolute;
background-color: white;
z-index: 50;
}
.headerRowInvisible {
white-space: nowrap;
visibility: hidden;
}如果您想知道不可见的<tr>，将位置设置为绝对会打乱表的其余部分的格式，并与其顶部重叠，因此我创建了一个具有正常位置的不可见的<tr>，以便它可以创建空间并为表体提供正确的列宽。背景和z索引是这样的，当你向下滚动时，粘性标题将正确地覆盖正文。否则，你得到的文本顶部的文本，它看起来很混乱。
回答 1
Stack Overflow用户
发布于 2020-10-20 23:54:48
使用top、right和left属性调整该绝对定位元素的位置，并在其下面的下一个非绝对定位元素上使用margin-top来创建一些空间，以避免重叠。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64452592
复制相关文章
相似问题
如何防止绝对位置的元素溢出？
如何隐藏水平溢出绝对元素
如何防止水平溢出？
如何防止水平溢出？
获取表头部分的绝对/全局位置，同时考虑水平滚动
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
