2015-12-02 131 views
1

我有一些元素具有overflow: hiddenoverflow: auto的結構。我想在容器太小時保留滾動部分。我有一個深深嵌套的元素(#color-picker-container),我想逃避溢出並在一切之外。我不知道怎麼去,要沒有擺脫overflow: hidden使深度嵌套元素溢出隱藏隱藏

在這裏工作是一個fiddle證明什麼,我想

這裏是我的代碼:

#mainDiv { 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 265px; 
 
    padding: 5px; 
 
    background-color: lightblue; 
 
    position: absolute; 
 
    z-index: 4; 
 
} 
 
.container { 
 
    position: relative; 
 
    height: 100%; 
 
    border: solid 1px red; 
 
} 
 
.div1 { 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    position: absolute; 
 
} 
 
/**IMPORTANT**/ 
 
.overflow-div-1 { 
 
    top: 10px; 
 
    bottom: 10px; 
 
    width: 100%; 
 
    background-color: lightgreen; 
 
    position: absolute; 
 
    overflow: auto; 
 
} 
 
/**IMPORTANT**/ 
 
.overflow-div-2 { 
 
    min-height: 100px; 
 
    overflow: hidden; 
 
    border: solid 1px black; 
 
} 
 
/**IMPORTANT**/ 
 
.overflow-div-3 { 
 
    height: 0; 
 
    overflow: hidden; 
 
} 
 
#color-picker-container { 
 
    position: absolute; 
 
    z-index: 5; 
 
    right: 0; 
 
} 
 
#color-picker-container #color-picker { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 40px; 
 
    background-color: #fff; 
 
    height: 160px; 
 
    width: 200px; 
 
    border: 1px solid #ccc; 
 
} 
 
#color-picker-container .color-label { 
 
    height: 20px; 
 
    width: 40px; 
 
    background-color: red; 
 
}
<div id="mainDiv"> 
 
    <div class="container"> 
 
    <div class="div1"> 
 
     <div class="overflow-div-1"> 
 
     <div class="overflow-div-2"> 
 
      <div class="overflow-div-3"> 
 
      <div class="output-item"> 
 
       <div class="field"> 
 
       <div class="input"> 
 
        <div id="color-picker-container"> 
 
        <div class="color-label"></div> 
 
        <div id="color-picker"></div> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

+0

對不起,但你說的「逃避」和「保持外面」是什麼意思? –

+0

我希望它在右側,不被包含在div中。我添加了一個小提琴來演示我想要的。看到我的更新 – cocoa

回答

0

你不能。將日期選擇器附加到層次結構中的其他元素。

我一起工作的一些/大多數組件/庫允許我選擇將要放置日期選擇器的「target」元素。

+0

同意,你將不得不使用事件或國旗 –

+0

darn。那麼我將不得不重寫一堆東西。感謝您的回答 – cocoa