在容器滚动时将隐藏的 <div> 移动到可滚动的 <div> 中答案

【问题标题】：Moving a hidden <div> inside a scrollable <div> as the container scrolls在容器滚动时将隐藏的 <div> 移动到可滚动的 <div> 中
【发布时间】：2026-02-15 00:10:01
【问题描述】：

我有一个带有以下 HTML 的 Angular 页面：

<div style="overflow-y:scroll; height:700px;" data-ng-if="ctrl.items.length">
    <table class="table table-striped">
        <tbody>
            <tr bindonce data-ng-repeat="i in ctrl.items">
                <td class="note-row">
                    <div my-tooltip-template="nav-fo-to-bo-compare/comments-hover-template.html" my-tooltip-scope="i.navSummary">
                        <div break-notes nav-summary="i.navSummary" item="i" note-disable="!ctrl.allowChanges"></div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

该页面为表格中的每条记录显示一个自定义工具提示。下面是自定义工具提示指令。

angular.module('app').directive("myTooltipTemplate", function ($compile) {
        var contentContainer;
        return {
            restrict: "A",
            scope: {
                myTooltipScope: "="
            },
            link: function (scope, element, attrs) {
                var templateUrl = attrs.myTooltipTemplate;

                scope.hidden = true;

                var tooltipElement = angular.element("<div class='customTooltip' ng-hide='hidden'>");
                tooltipElement.append("<div ng-include='\"" + templateUrl + "\"'></div>");

                element.parent().append(tooltipElement);
                element
                  .on('mouseenter', function () { scope.hidden = false; scope.$digest(); })
                  .on('mouseleave', function () { scope.hidden = true; scope.$digest(); });

                var toolTipScope = scope.$new(true);
                angular.extend(toolTipScope, scope.myTooltipScope);
                $compile(tooltipElement.contents())(toolTipScope);
                $compile(tooltipElement)(scope);
            }
        };
    });

自定义工具提示 CSS 类：

.customTooltip{
            position:absolute;            
            background-color:#00adee;
            z-index:2; 
            display:block;
            right: 25px;       
        }

对于屏幕上显示的记录，工具提示的位置正确。它显示在鼠标悬停上。但是，当我滚动页面以查看表末尾的记录时，自定义工具提示似乎仍显示在该表记录最初存在的位置。如何确保即使用户滚动表格，底部行的工具提示也会像网格顶部的工具提示一样出现？

【问题讨论】：

那是因为你的 CSS 中有position:absolute;。如果你删除它会发生什么？
如果我从 CSS 中删除位置属性，即使我滚动，工具提示也会与行对齐，但这次它会扩展行并扭曲 UI。看起来并不完全像一个工具提示。
ok.. 然后保留 absolute 本身。尝试将position:relative 添加到父级..
父母，你的意思是在 ??
可能是...因为我不知道到底是哪一个customTooltip..试试看..