将div从具有固定高度的包装div中取出

Question

我在另一个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中的滚动并显示：

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

Answer 1

确定。我理解它的方式。

您希望 .div2 与 div1 分离。但div1应该保持滚动状态，因为其中的其他 div..n 。

我猜position:absolute应该这样做。

做了一个小提琴，看看看。更好地查看全屏

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

也许你在找这个？

$(".div2").appendTo($(".div1").parent);