如何解释：绝对定位脱离文档流，依然撑出了滚动条？

fofo

发布于
2018-06-27

<!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>

阅读 7.1k

7 个回答

拇指一代

发布于
2018-06-27

你设置的height超过了浏览器，不是会滚动条吗？绝对定位不是覆盖了父的吗？

发布于
2018-06-27

你的 .parent 应该设置一个 overflow: hidden ，超出的隐藏就好了

发布于
2018-06-27

你是相对与。parent定位的啊。parent的高度没有absolute的大，所以就会撑起滚动条啊

发布于
2018-06-27

绝对定位元素相对于最近的非 static 祖先元素定位。
它脱离了这个祖先内的文档流但脱离不了这个祖先当这个祖先overflow不是hidden的时候它超出右下边界就产生了滚动条

Noob菜先生

发布于
2018-06-27

你说的滚动条并不是parent的滚动条，绝对定位造成高度塌陷以及inline-block化，应该是根节点的滚动条，这点我也不太懂……

发布于
2018-06-28

脱离文档流之后因为你对absolute设置的宽高已经超过了浏览器的宽高，自然会出现滚动条了。不然你把宽高设少点试试？

发布于
2018-06-28

这个滚动条不是parent的滚动条，是浏览器的。脱离了文档流，但是没有脱离浏览器呢。

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题