Position absolute 不能使用溢出自動？
[英]Position absolute is not working with overflow auto?
問題描述
我有一個列表，我正在使用僅在 div 內部工作的 position，它也應該在外部工作。 當我刪除溢出自動它的工作正常。 如何解決這個問題？
.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
根據我之前的評論制作的演示（這是一個普通的技巧，它不會使絕對元素顯示在滾動容器之外）。
要將工具提示保持在滾動容器區域內，您可以添加：
padding-left:28px;到 thead 和 tbody 以保持兩者對齊。 漸變可用於繪制顏色背景，因此它從左側 25/28 像素開始。
.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>
位置：帶有溢出-y 的 div 內的絕對元素：自動未顯示在所需位置
[英]Position:absolute element inside a div with overflow-y:auto does not show in the desired position
當溢出設置為滾動/自動時，位置粘性不適用於表格標題
[英]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
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.