使深层嵌套的元素转义溢出隐藏

Question

我有一个结构，其中一些元素具有 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>

Answer 1

你不能。将您的日期选择器附加到层次结构中的其他元素。

Some/most components/libraries 我的工作允许我选择 'target' 放置日期选择器的元素。

使深层嵌套的元素转义溢出隐藏

Make deeply nested element escape overflow hidden

html

css

z-index

css-position

overflow