html - 强制元素在溢出 :hidden 之外显示

Question

这可能是在尝试不可能的事情，但我想在 overflow: hidden 元素之外显示一个元素。我知道这没有任何意义，并且一切正常，但只是想仔细检查一下是否有办法。

最好用这段代码描述:

.outer {
  position: fixed;
  top: 30px;
  left: 50px;
  overflow: hidden;
  height: 30px;
  width: 300px;
  background: red;
}

.inner {
  position: relative;
}

.show-up {
  width: 100px;
  height: 300px;
  background: green;
  position: absolute;
  left: 20px;
  overflow: visible;
}

<div class="outer">
  <div class="inner">
    <div class="show-up">this needs to show up ALL 300 pixels high of it</div>
  </div>
</div>

View on JSFiddle

Answer 1

overflow:hidden 定义将隐藏该元素内超出其边界的任何内容。

根据您的具体应用，您可以使用如下结构:

.container {
  position: fixed;
  top: 30px;
  left: 50px;
  height: 30px;
  width: 300px;
  background: red;
}
.outer {
  overflow: hidden;
}
.inner {
  position: absolute;
}
.show-up {
  width: 100px;
  height: 300px;
  background: green;
  position: relative;
  margin-left: 20px;
}

<div class="container">
  <div class="outer">
    <div class="inner"></div>
  </div>
  <div class="show-up">this needs to show up ALL 300 pixels high of it</div>
</div>

View on JSFiddle