Position absolute 不能使用溢出自动？
[英]Position absolute is not working with overflow auto?
问题描述
I have a list where i'm using position that is working only inside the div, It should be working outside also.
我有一个列表，我正在使用仅在 div 内部工作的 position，它也应该在外部工作。 When i remove overflow auto its working fine.当我删除溢出自动它的工作正常。 How to fix this issue?如何解决这个问题？
.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; }
<,DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> </head> <body> <div class="container p-5"> <div class="customize-table"> <div class="thead"> <div class="row"> <div class="col-md-5 text-light-purple text-left">Pair <img src="images/icon-down.svg" alt=""></div> <div class="col-md text-light-purple text-left">Price</div> <div class="col-md text-light-purple text-right">Change</div> </div> </div> <div class="tbody"> <div class="row"> <div class="customize-table-tooltip">tooltip</div> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="customize-table-tooltip">tooltip</div> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> </div> </div> </div> </body> </html>
1 个解决方案
解决方案1
0 2020-06-12 10:14:37
demo made from my earlier comment (this is an average trick, it doesn't make absolute element to show outside a scrolling container).根据我之前的评论制作的演示（这是一个普通的技巧，它不会使绝对元素显示在滚动容器之外）。
to keep your tooltip inside the scrolling container area, you may add:
padding-left:28px;padding-left:28px;to thead and tbody to keep both aligned.
.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; }
<,DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> </head> <body> <div class="container p-5"> <div class="customize-table"> <div class="thead"> <div class="row"> <div class="col-md-5 text-light-purple text-left">Pair <img src="images/icon-down.svg" alt=""></div> <div class="col-md text-light-purple text-left">Price</div> <div class="col-md text-light-purple text-right">Change</div> </div> </div> <div class="tbody"> <div class="row"> <div class="customize-table-tooltip">tooltip</div> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="customize-table-tooltip">tooltip</div> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div> </div> <div class="col-md"> <div class="text-white text-left">0.00000848</div> </div> <div class="col-md"> <div class="text-red text-right">-4.01%</div> </div> </div> </div> </div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用溢出自动在div中设置绝对位置的高度 - Set height for position absolute in div with overflow auto
位置：带有溢出-y 的 div 内的绝对元素：自动未显示在所需位置 - Position:absolute element inside a div with overflow-y:auto does not show in the desired position
溢出与绝对位置和浮动位置相结合 - Overflow combined with position absolute and floats
当溢出设置为滚动/自动时，位置粘性不适用于表格标题 - Position sticky not working on table header when overflow is set to scroll / auto
div位置的绝对值…溢出-y：自动，然后垂直滚动条覆盖了部分内容 - div position absolute… overflow-y:auto and then vertical scrollbar covers some of the content
.fade无效，位置绝对 - .fadeTo not working, position absolute
scrollHeight 不适用于 position：绝对 - scrollHeight not working with position:absolute
用“溢出：自动”滚动div的位置 - Scroll Position of div with “overflow: auto”
溢出滚动内表的绝对位置 - absolute position on table inside overflow scroll
css 绝对 position 隐藏溢出动画 - css absolute position animated with overflow hidden
相关标签