html - 溢出-y 滚动，子溢出

我有一个宽度为 300 像素、高度为 100%、溢出-y:滚动的 div(父级)。在父 div 中，我有一个子 div，它呈现一个 Angular 组件。当前组件(子)在父级内部溢出。但我希望它位于一切之上。

当前工作示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Angular accoridon</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <style></style>
  </head>
  <body ng-app="app" ng-controller="controller">
    <div style="overflow-y: scroll;width: 300px;height: 500px">
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>
        <input type="text" ng-model="searchTerm" />
        <div ng-if="searchTerm" style="width: 500px;">
          <div
            ng-click="onClick(item)"
            ng-repeat="item in items | filter: searchTerm"
            style="background: lightgray; padding: 20px;margin: 5px 0px;"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" />
      <div>Hello World!!</div>
      <div>Hello World!!</div>
    </div>
    <script>
      angular.module('app', []).controller('controller', function($scope) {
        $scope.searchTerm = '';
        $scope.items = [
          {name: 'First'},
          {name: 'Second'},
          {name: 'Third'},
          {name: 'Fourth'},
          {name: 'Fifth'},
          {name: 'Sixth'},
          {name: 'Seventh'},
          {name: 'Eighth'},
          {name: 'Ninth'},
          {name: 'Tenth'},
          {name: 'Eleventh'},
          {name: 'Twelth'},
          {name: 'Thirteenth'},
          {name: 'Fourteenth'},
          {name: 'Fifteenth'},
        ];
        $scope.onClick = function(item) {
          console.log(item.name);
          $scope.searchTerm = '';
        };
      });
    </script>
  </body>
</html>

必需:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Angular accoridon</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <style></style>
  </head>
  <body ng-app="app" ng-controller="controller">
    <div style="overflow-y: scroll;width: 300px;height: 500px">
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>
        <input type="text" ng-model="searchTerm" />
        <div ng-if="searchTerm" style="width: 500px;position: fixed">
          <div
            ng-click="onClick(item)"
            ng-repeat="item in items | filter: searchTerm"
            style="background: lightgray; padding: 20px;margin: 5px 0px;"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
    </div>
    <script>
      angular.module('app', []).controller('controller', function($scope) {
        $scope.searchTerm = '';
        $scope.items = [
          {name: 'First'},
          {name: 'Second'},
          {name: 'Third'},
          {name: 'Fourth'},
          {name: 'Fifth'},
          {name: 'Sixth'},
          {name: 'Seventh'},
          {name: 'Eighth'},
          {name: 'Ninth'},
          {name: 'Tenth'},
          {name: 'Eleventh'},
          {name: 'Twelth'},
          {name: 'Thirteenth'},
          {name: 'Fourteenth'},
          {name: 'Fifteenth'},
        ];
        $scope.onClick = function(item) {
          console.log(item.name);
          $scope.searchTerm = '';
        };
      });
    </script>
  </body>
</html>

我能够让它工作它的位置:固定，结果出现在顶部，但是如果我开始滚动父级，那么结果会停留在它们所在的位置(因为它们是固定的)并且不要坚持输入。预期的行为是它们应该粘在父滚动条上的输入文本框上，并且结果必须在顶部。

最佳答案

使用 CSS 定位来正确放置元素。查看以下链接以了解您的选择 https://www.w3schools.com/css/css_positioning.asp .

在下面修改后的代码段中，第一个文本框出现在 div 的顶部，位置为:固定。即使页面滚动，它也会保持原样。

但是，位于底部的第二个 texbox 具有绝对位置，它相对于您的父容器(即您的父 div)是绝对的。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Angular accoridon</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <style></style>
  </head>
  <body ng-app="app" ng-controller="controller">
    <div style="overflow-y: scroll;width: 300px;height: 500px">
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div style="position:absolute; bottom:0">
        <input type="text" ng-model="searchTerm" />
        <div ng-if="searchTerm" style="width: 500px;position: fixed">
          <div
            ng-click="onClick(item)"
            ng-repeat="item in items | filter: searchTerm"
            style="background: lightgray; padding: 20px;margin: 5px 0px;"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div style="position:fixed; top:0">
        <input type="text" ng-model="searchTerm" />
        <div ng-if="searchTerm" style="width: 500px;position: fixed">
          <div
            ng-click="onClick(item)"
            ng-repeat="item in items | filter: searchTerm"
            style="background: lightgray; padding: 20px;margin: 5px 0px;"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
    </div>
    <script>
      angular.module('app', []).controller('controller', function($scope) {
        $scope.searchTerm = '';
        $scope.items = [
          {name: 'First'},
          {name: 'Second'},
          {name: 'Third'},
          {name: 'Fourth'},
          {name: 'Fifth'},
          {name: 'Sixth'},
          {name: 'Seventh'},
          {name: 'Eighth'},
          {name: 'Ninth'},
          {name: 'Tenth'},
          {name: 'Eleventh'},
          {name: 'Twelth'},
          {name: 'Thirteenth'},
          {name: 'Fourteenth'},
          {name: 'Fifteenth'},
        ];
        $scope.onClick = function(item) {
          console.log(item.name);
          $scope.searchTerm = '';
        };
      });
    </script>
  </body>
</html>

关于html - 溢出-y 滚动，子溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55147304/

html - 溢出-y 滚动，子溢出

上一篇：html - youtube 嵌入链接和图像之间的空间 - 我看不出它来自哪里？

下一篇：javascript - 如果在点击打印按钮之前滚动表格，则粘性标题打印到页面的一半