59

这可能是在尝试不可能的事情，但我想在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 上查看

4

4 回答 4

30

该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 上查看

于 2013-06-26T19:50:10.987 回答
18

使用相对位置创建一个额外的外部 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/

于 2018-06-10T11:59:46.613 回答
13

我一直在为工具提示而苦苦挣扎。我的包含元素是overlay: hidden并且添加我无法添加额外的包装器divs，因为它会导致 flexbox 和ResizeObserver. 据我所知，position: absolute元素无法逃脱同时 overlay: hidden是and的父级position: relative。

但是我发现position: fixed元素根本没有被裁剪overlay: hidden，position: fixed而且在我的情况下它实际上更容易使用。可能是某些人的选择。

于 2020-05-01T06:57:00.520 回答
5

请检查我创建的以下小提琴：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;
}
于 2013-06-26T19:49:25.413 回答