Question

我有一个parent div，其中包含一个绝对定位的child div。

child div位于parent div的初始边界之外。它通常没有任何问题渲染。

我向overflow-y: scroll; div添加了parent，现在尽管添加了child，但隐藏了overflow-x: visible;元素。

CSS

#parent{
     position: relative;
     overflow-y: scroll;
     overflow-x: visible;
}
#child{
     position: absolute;
     left: -50px;
}

也是Fidle

Answer 1

在stackoverflow上找到了这个，但你不会高兴。

CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

简而言之，答案就是这个

如果您对visible或overflow-x和overflow-y使用visible 对于另一个，visible以外的东西。 auto值为。{1} 解释为overflow-x。

他的回答更深入地讨论了解释这种情况的W3规范。

您的auto几乎无法看到，因为它会转向overflow-y。（如果你的<div id=parent> <div id=absolute-child> This is the child </div> <div id=child> This is the child </div> </div>与它有任何不同，那么该风格的哪一部分会隐藏其中的内容。

修改

您可以尝试将其作为该规范的解决方法。

HTML

body { text-align: center; } #parent{ display:inline-block; position: relative; text-align: left; } #absolute-child { background-color: red; color: white; position: absolute; left: -50px; } #child{ border: solid 1px black; width: 200px; height: 200px; overflow-x: visible; overflow-y: scroll; margin-left: auto; margin-right: auto; }

CSS

display: inline-block

http://jsfiddle.net/BFLQr/

给我一点时间来解释我的所作所为。

修改

首先，我基本上必须将你的父div移动到现在存在的父div的子div。这有点奇怪，但这是我唯一能想到的。现在的父div通过absolute应用了“shrink to fit”样式，它将它包裹在它的子div中。

由于位置absolute被推出文档流，这意味着您的relative位置子项不会影响它的新“缩小到适合”父级的宽度或高度。 “缩小至适合”父级也显示absolute，这样就可以根据它来定位inline-block位置div。此外，由于父级现在显示center以使其居中，因此您必须在其包含元素上使用text-align left。这意味着您还需要在#parent或#child元素上放置{{1}}对齐文本。

希望这有帮助。：）

P.S。我编辑了它在#child元素上有一个不必要的位置的小提琴。我还将text-align left添加到新父级

Answer 2

您可以嵌套另一个包含 overflow: scroll 的可滚动内容的子容器，并将绝对 div 保留在父容器上。

.box1 {
  position: relative;
  height: 100vh;
  background: red;
  width: 200px;
}

.box2 {
  height: 100%;
  background: dodgerblue;
  width: 200px;
  overflow-y: scroll;
}


.box3 {
  position: absolute;
  width: 50px;
  height: 50px;
  right: -25px;
  top: 0;
  background: pink;
}

<div class="box1">
    <div class="box2">
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
  </div>
  
  
  <div class="box3">
  
  </div>
</div>

小提琴：https://jsfiddle.net/tylorkolbeck/wmcu9jb1/2/

＆＃34;溢出-y：滚动;＆＃34;隐藏在水平线上的溢出元素

2 个答案: