Position absolute is not working with overflow auto?
Question
I have a list where i'm using position that is working only inside the div, It should be working outside also. 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 answers
solution1
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;to thead and tbody to keep both aligned. a gradient can be used to draw the color background, so it starts at 25/28px from the left.
.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Set height for position absolute in div with overflow auto
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 position absolute… overflow-y:auto and then vertical scrollbar covers some of the content
.fadeTo not working, position absolute
scrollHeight not working with position:absolute
Scroll Position of div with “overflow: auto”
absolute position on table inside overflow scroll
css absolute position animated with overflow hidden
Related Tags