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

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的绝对位置。

＆＃13;

.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;

}

＆＃13;

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

＆＃13;

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

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

4 个答案: