jquery 位置绝对值不适用于溢出自动

bttbmeg0 于 12个月前发布在 jQuery

关注(0)|答案(1)|浏览(110)

我有一个列表，我使用的位置只在div内部工作，它应该在外部也工作。当我删除溢出自动它工作正常。如何解决这个问题？

.customize-table {
  background: #ccc;
}

.customize-table .thead {
  position: sticky;
  top: 0;
}

.customize-table .row {
  margin: 0px;
  position: relative;
}

.trade-box-3-1 .customize-table .tbody .row:hover {
  background: rgba(0, 0, 0, 0.2);
}

.customize-table-tooltip {
  position: absolute;
  top: 0px;
  left: -25px;
  z-index: 100;
  padding: 3px;
  background: rgba(0, 0, 0, .8);
  color: #fff;
  padding: 0.4em 1em;
  border-radius: 0.4em;
}

.customize-table .tbody {
  height: 285px;
  overflow: auto;
}

个字符

jquery

来源：https://stackoverflow.com/questions/62340954/position-absolute-is-not-working-with-overflow-auto

1条答案

按热度按时间

vxqlmq5t1#

从我之前的评论中得到的演示 *（这是一个普通的技巧，它不会让绝对元素显示在滚动容器之外）。
要保持你的工具提示在滚动容器区域内，你可以添加：padding-left:28px;到head和tbody以保持两者对齐.渐变可以用来绘制颜色背景，所以它从左边的25/28 px开始.

.customize-table {
  background: linear-gradient(to right,transparent 28px, #ccc 28px);
  margin-left:-28px;
}

.customize-table .thead {
  position: sticky;
  top: 0;
  padding-left:28px;
}

.customize-table .row {
  margin: 0px;
  position: relative;
}

.trade-box-3-1 .customize-table .tbody .row:hover {
  background: rgba(0, 0, 0, 0.2);
}

.customize-table-tooltip {
  position: absolute;
  top: 0px;
  left: -25px;
  z-index: 100;
  padding: 3px;
  background: rgba(0, 0, 0, .8);
  color: #fff;
  padding: 0.4em 1em;
  border-radius: 0.4em;
}

.customize-table .tbody {
  height: 285px;
  overflow: auto;
  padding-left:28px;
}

个字符

赞(0）回复(0）举报 12个月前

我来回答

jquery 位置绝对值不适用于溢出自动

1条答案

相关问题

热门标签

最新问答