我有一些元素具有overflow: hidden
和overflow: 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>
對不起,但你說的「逃避」和「保持外面」是什麼意思? –
我希望它在右側,不被包含在div中。我添加了一個小提琴來演示我想要的。看到我的更新 – cocoa