從具有固定高度的包裝div中取出一個div

Question

我在另一個div1中有一個div2。 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; 
} 

EDIT 這裏是初始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滾動。

Answer 1

好的。我理解它的方式。

你想要.div2是從DIV1分離。但div1應該保持可滾動，因爲其他div..n s裏面。

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

讓我知道如果這能幫助，或者如果它完全錯過了標記！

Answer 2

也許您正在尋找？

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