title: Overflow-y scroll, child overflow
body: <p>I have a div(parent) with width as 300px,height 100%, overflow-y: scroll. 
  Inside the parent div, I have a child div which renders an angular component. Currently the component(child) is overflowing inside the parent. But I want it to be on top of everything.</p>
  
  <p>Current working sample
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
      &lt;title&gt;Angular accoridon&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"&gt;&lt;/script&gt;
      &lt;style&gt;&lt;/style&gt;
    &lt;/head&gt;
    &lt;body ng-app="app" ng-controller="controller"&gt;
      &lt;div style="overflow-y: scroll;width: 300px;height: 500px"&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;
          &lt;input type="text" ng-model="searchTerm" /&gt;
          &lt;div ng-if="searchTerm" style="width: 500px;"&gt;
            &lt;div
              ng-click="onClick(item)"
              ng-repeat="item in items | filter: searchTerm"
              style="background: lightgray; padding: 20px;margin: 5px 0px;"
            &gt;
              {{ item.name }}
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" /&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
      &lt;/div&gt;
      &lt;script&gt;
        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 = '';
          };
        });
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Required:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
      &lt;title&gt;Angular accoridon&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"&gt;&lt;/script&gt;
      &lt;style&gt;&lt;/style&gt;
    &lt;/head&gt;
    &lt;body ng-app="app" ng-controller="controller"&gt;
      &lt;div style="overflow-y: scroll;width: 300px;height: 500px"&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;
          &lt;input type="text" ng-model="searchTerm" /&gt;
          &lt;div ng-if="searchTerm" style="width: 500px;position: fixed"&gt;
            &lt;div
              ng-click="onClick(item)"
              ng-repeat="item in items | filter: searchTerm"
              style="background: lightgray; padding: 20px;margin: 5px 0px;"
            &gt;
              {{ item.name }}
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
        &lt;div&gt;Hello World!!&lt;/div&gt;
      &lt;/div&gt;
      &lt;script&gt;
        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 = '';
          };
        });
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am able to get it working it position: fixed, the result is coming on the top, but if I start scrolling the parent, then the results stay wherever they are(as they are fixed) and do not stay stick to the input.
  The expected behaviour is that they should stick to the input text box on scroll of parent as well as the results must be on the top.</p>