Question

我将我的Chrome更新为版本55，现在我的position: fixed;中的overflow: hidden;不再有用了。

以下是示例： http://codepen.io/PRDev/pen/mOvwOO

.container {
  background: #d3d3d3;
}

.overflow {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}

.parallax {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #dfdfdf;
}

.next-section {
  position: relative;
  z-index: 10;
  height: 200vh;
}

<div class="container">
  <div class="overflow">
    <div class="parallax">
      <h1>Headline</h1>
      <p>Lorem ipsum</p>
    </div>
  </div>
  <div class="next-section">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

当我向下滚动时，文本在div溢出隐藏之外仍然可见，在safari和chrome 54上它被隐藏但不在最新的Chrome 55中。

on chrome 54中的.overflow文本隐藏在下一部分的文本后面，在chrome 55上，溢出的文本在下一部分后面可见

Answer 1

我不认为这是溢出的问题：隐藏;作品。这决定了溢出其父级的内容会发生什么。你正在做的是将一个div移到另一个div上，你看到背后的原因是因为.next-section没有背景。

给.next-section相同的bg颜色background: #dfdfdf;

＆＃13;

body {
  margin: 0;
}
.container {
  background: #d3d3d3;
}
.overflow {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}
.parallax {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #dfdfdf;
}
.next-section {
  background: #dfdfdf;
  position: relative;
  z-index: 10;
  height: 200vh;
}

＆＃13;

<div class="container">
  <div class="overflow">
    <div class="parallax">
      <h1>Headline</h1>
      <p>Lorem ipsum</p>
    </div>
  </div>
  <div class="next-section">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

＆＃13;

Chrome 55：位置：固定;在div溢出：隐藏;不起作用

1 个答案: