DIV 大于父级，溢出：隐藏；位置：相对[重复]

Posted 2023-03-06

【中文标题】DIV 大于父级，溢出：隐藏；位置：相对[重复]

【英文标题】：DIV bigger than parent with overflow:hidden; position: relative [duplicate]

【发布时间】：2017-02-06 11:34:05

【问题描述】：

当祖先 DIV 的样式为 overflow: hidden; position: relative; 时，如何显示大于其祖先的 DIV？

这是一个例子：

html：

<div class="container">
  <div class="content">
  __________________________SHOW_ME
  </div>
</div>

CSS：

.container 
  position: relative;
  padding: 10px;
  overflow: hidden;
  width: 10em;
  border: 1px solid;
  height: 50px;


.content 
  position: absolute;
  overflow: visible;
  border: 5px solid red;

这是JS Fiddle 上的示例。

我尝试使用position: absolute、overflow: visible、right: -100px 的各种组合来设置内容 DIV 的样式，但没有帮助。

如何设置内容 div 的样式以使其完全可见？ 我不能用container类修改父DIV，只能修改里面的内容。

【问题讨论】：

短版：你不能。长版：您可以使用固定位置，但内容 div 会随着屏幕滚动

我认为，您必须以某种方式将 .container 修改为 overflow:visible 或其宽度

@Pete 谢谢，位置：固定对我有用。你会把它作为答案发布吗？

啊，把它交给 Erikzy - 由于滚动缺陷，我认为这不是一个足够好的解决方案来保证完整的答案 - 如果我要使用 js 来解决这个问题，我会可能只是包装容器并将内容移动到包装器中

为什么你需要（或不能删除）overflow: hidden 在父节点上？

【参考方案1】：

如果您希望内容的位置与容器相关联，除非您使用 javascript 更新滚动位置并将内容的位置设置为固定而不是绝对位置，否则您基本上不能。

【参考方案2】：

实际上你不能使用overflow:hidden在元素内显示div，但我有解决方案。 你可以用overflow:auto给你的div，这样用户就可以滚动x

Here the example fiddle

【讨论】：

谢谢，但是滚动看起来很难看 :-)

最好的解决方案是更改 .container 中的 overflow:hidden; 为什么不这样做？

【参考方案3】：

.container 
  position: relative;
  padding: 10px;
  overflow: hidden;
  width: auto;
  border: 1px solid;
  height: 50px;


.content 
    position: absolute;
    overflow: auto;
    border: 5px solid red;
    width: auto;
    padding: 10px;

<div class="container">
  <div class="content">
        __________________________SHOW_ME
  </div>
</div>