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

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

我为这个工具提示苦苦挣扎了很长时间。我的包含元素是

overflow: hidden

并添加我无法添加额外的包装器

divs

，因为它会导致 Flexbox 和

ResizeObserver

出现一些奇怪的错误。据我所知，

position: absolute

元素无法逃脱 both

overflow: hidden

和

position: relative

的父元素。

但是我发现

position: fixed

元素根本没有被

overflow: hidden

剪切，而且在我的例子中使用

position: fixed

实际上更容易。可能是某些人的选择。

Answer 3

制作一个具有相对位置的附加外部 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/

Answer 4

请检查我创建的以下小提琴： 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 5

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

Answer 6

如果要调整内容在容器中溢出的方式而不隐藏它，可以使用

overflow

CSS 属性，其值不是“hidden”。您可以使用三个主要值：

1. overflow: visible;

   ：这是默认值，它允许内容溢出容器而不进行任何剪辑。它将在容器外部可见，可能与其他元素重叠。

.container {
  [overflow: visible;][1]
}

2. overflow: scroll;

   ：如果内容溢出，此值会向容器添加水平和垂直滚动条。用户可以滚动查看隐藏内容。

.container {
  overflow: scroll;
}

3. overflow: auto;

   ：此值仅在内容超出容器尺寸时添加滚动条。如果没有溢出，就不会显示滚动条。

.container {
  overflow: auto;
}

这是一个简单的示例演示了这些溢出属性的使用：

.container {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  overflow: scroll; /* Change this to visible or auto to see the different behaviors */
}

.content {
  width: 300px;
  height: 300px;
  background-color: lightblue;
}

<div class="container">
  <div class="content"></div>
</div>

在此示例中，如果设置

overflow: scroll;

，则当内容超出容器尺寸时将出现滚动条。如果设置

overflow: visible;

，溢出的内容将在容器外部可见。如果设置

overflow: auto;

，则只有当内容溢出时才会出现滚动条。