javascript - 将div从具有固定高度的包装div中移出

我在另一个div2中有一个div1。 div1具有固定的高度和溢出。这是场景：



外部深黄色div是div1（具有滚动，您可以在右侧看到），而div.box1-large（浅黄色边框）是div2。如您所见，div2的多余内容隐藏在div1内，只有在滚动div1时才能看到。如何将div2带出div1？请注意，div1中也包含许多其他div。

以下是相应的CSS：

.div1 {
background: #2a2a2a;
border-style: solid;
border-width: 0 1px 1px 1px;
padding: 10px;
min-height: 350px;
height: 350px;
overflow: auto;

}

.div2 {
    border: solid 10px;
    font-size: 13px;
    text-align: left;
    width: 420px;
    height: 270px;
    background: green;
    position: absolute;
    left: 0px;
    z-index: 9;
    top: 62px;
}

编辑
这是初始div：



我试图将div1 css更改为

.div1 {
    background: #2a2a2a;
    border-style: solid;
    border-width: 0 1px 1px 1px;
    padding: 10px;
    min-height: 350px;
    height: 350px;
    overflow: visible;
}

但这会删除div1中的滚动并显示：



我想要的是上面的secenario，但是在div1中滚动。

最佳答案

好。我的理解方式。

您希望将.div2与div1分离。但是div1应该保持可滚动性，因为其中还有其他div..ns。

我想position:absolute应该这样做。

做了个小提琴，看看。全屏效果更好

body {
  font-family: Arial, sans-serif;
  font-size: 14px;
}
.div1 {
  background: #2a2a2a;
  border-style: solid;
  border-width: 0 1px 1px 1px;
  padding: 10px;
  min-height: 350px;
  height: 350px;
  overflow: auto;
}
.inter {
  border: solid 10px;
  background-color: blue;
  height: 100px;
  width: 100px;
}
.div2 {
  border: solid 10px;
  font-size: 13px;
  text-align: center;
  width: 420px;
  height: 270px;
  background: green;
  z-index: 9;
}
.abs {
  position: absolute;
  background-color: red;
}

<div class="div1">
  <div class="inter">Something</div>
  <div class="div2 abs">Stuff Man</div>
  <div class="div2">What??</div>
  <div class="div2">What??</div>
</div>

让我知道这是否有帮助，或者是否完全错过了标记！

关于javascript - 将div从具有固定高度的包装div中移出，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40629788/