How to explain: absolute positioning away from the document stream, still propped up the scroll bar?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .parent {
      width: 50px;
      height: 50px;
      background: green;
      position: relative;
    }
    .absolute {
      width: 10000px;
      height: 10000px;
      background: pink;
      position: absolute;
    }
  </style>
</head>
<body>

  <div class="parent">
    <div class="absolute">
    </div>
  </div>
</body>
</html>
Css html
Mar.22,2021

you set more height than the browser, don't you scroll bar? Doesn't absolute positioning cover the father's?

your .parent should just set a hide of overflow: hidden, excess

you are relative to. Parent located it. Parent is not as tall as absolute, so it holds up the scroll bar

absolute positioning element relative to the nearest non-static ancestor element.
it is separated from the document stream within this ancestor, but not from this ancestor. When the ancestor overflow is not hidden, it produces a scroll bar

. The scroll bar you said is not parent scroll bar, absolute positioning causes high collapse and inline- blockization, it should be the root node scroll bar, which I don't quite understand.

after leaving the document stream, because you have set the width and height of the absolute to exceed the width and height of the browser, a scroll bar will appear naturally. Why don't you try setting the width and height a little less?

this scroll bar is not a parent scroll bar, but a browser scroll bar. Out of the document stream, but not out of the browser.

Previous: Vue makes a tab switch, switching content to four list pages with the same style, but rendering data is different.

Next: The problem of drawing arcs by css

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu