强制元素在溢出之外显示：隐藏 [英] force element to display outside of overflow:hidden

问题描述

这可能是尝试不可能的，但我想在 overflow：hidden 元素之外显示一个元素。我知道这是没有意义的，而且事情是按照他们应该的方式工作的，但是只是想仔细检查一下，看看有没有办法。

最好用这段代码描述：

  .outer {position：fixed;顶部：30px; left：50px;溢出：隐藏; height：30px;宽度：300px; background：red;}。inner {position：relative;}。show-up {width：100px; height：300px;背景：绿色;位置：绝对; left：20px; overflow：visible;}  

 < div class =outer > < div class =inner> < div class =show-up>这需要显示所有300像素高的< / div> < / div>< / div>  

在JSFiddle上查看

解决方案

overflow：hidden 定义将隐藏该元素内部超出其范围的任何内容。

取决于您的具体应用程序，您可能可以使用像这样的结构：

$ b

.container {position：fixed;顶部：30px; left：50px; height：30px;宽度：300px; background：red;}。outer {overflow：hidden;}。inner {position：absolute;}。show-up {width：100px; height：300px;背景：绿色;位置：相对; margin-left：20px;}

< div class = 容器 > < div class =outer> < div class =inner>< / div> < / DIV> < div class =show-up>这需要显示它的所有300像素高度< / div>< / div>

在JSFiddle上查看

This is probably attempting the impossible, but I would like to display an element outside of an element that is overflow: hidden. I know that makes no sense and things are working as they should, but just wanted to double check to see if there is a way.

Best described with this code:

.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

解决方案

The overflow:hidden definition will hide anything inside that element that extends beyond its bounds.

Depending on your specific application, you may be able to use a structure like this:

.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

这篇关于强制元素在溢出之外显示：隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！