force元素显示在溢出之外:隐藏

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>

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

在JSFiddle上查看

Answer 2

我为这个工具提示苦苦挣扎了很长时间。我的包含元素是overlay: hidden并添加我无法添加额外的包装器，divs因为它会导致 flexbox 和ResizeObserver. 据我所知，position: absolute元素无法逃避既是 overlay: hidden又是 的父元素position: relative。

但是我发现，position: fixed元件不被截断overlay: hidden在所有的，它实际上是更容易使用position: fixed在我的情况。可能是某些人的选择。

Answer 3

请检查我创建的以下小提琴：http : //jsfiddle.net/NUNNf/12/

您应该添加一个像这样的外部容器：

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

然后在里面添加元素。

造型：

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

.container {
    position:relative;
}

.inner {
    position: relative;
}

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

Answer 4

设置一个具有相对位置的附加外部div，并设置要移至溢出隐藏div之外的div的绝对位置。

.container{
  position:relative;
}
.overflow-hid-div{
  overflow:hidden;
  margin-left:50px;
  width:200px;
  height: 200px;
  background-color:red;
}
.inner{
  width:50px;
  height: 50px;
  background-color:green;
  position: absolute;
  left:25px;
  top:25px;

}

<div class='container'>
    <div class='overflow-hid-div'>
        <div class='inner'>
            sup!
        </div>
    </div>
</div>

https://jsfiddle.net/JerryGoyal/ysgrevoh/1/