Question

当祖先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，只修改其中的内容。

Answer 1

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

Answer 2

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

Here the example fiddle

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

DIV比父母溢出更大：隐藏;位置：相对

3 个答案: