javascript - 使用绝对位置堆叠叠加 div

Question

我正在生成一个包含 jscolor 的 div (颜色选择器)元素。这些 div 根据 ID 插入到 HTML 页面中。我的第一个结果是我的目标 div 的扭曲显示如下

因此，我向插入的 div 添加了一个绝对位置，并使其远离我的 HTML，但仍然遵循我的目标。

我现在遇到的问题是，在同一个 HTML 目标上插入多个 DIV，它们会相互叠加。我正在寻找一种方法将它们堆叠起来，这样它们就可以全部可见，而不会扭曲我的 HTML 目标。

我插入的 Div 代码:

<div id="colorpicker1" style=" position:absolute; display:block; width:450px; margin-top:-10%; left:1px; z-index:5;">
<div class="well" style=" position:relative;  width:450px;  left:1px; z-index:5;" >
    <button class="jscolor{valueElement:'+Myvalue+', styleElement:'+Myvalueid+'}">
        Click here to pick a color
    </button>
    Value: 
    <input id="+Myvalue+"  >
</div>

我要实现的是这个

Answer 1

如果我正确理解你的问题，你可以实现你需要的，只需将 display:inline-block 应用于左侧的 div (#colorpicker1) 和右侧的 div。

示例:

.color-picker {
display: inline-block;
width:450px;
vertical-align: top;
}

.right-block {
display: inline-block;
width:450px;
height:450px;
background-color:rgb(0,127,0);
}

.well {
width: 400px;
margin: 2px;
padding: 12px 0 12px 12px;
background-color:rgb(239,239,239);
border: 2px solid rgb(214,214,214);
border-radius: 6px;
}

<div class="color-picker">
<div class="well">
<button>Click here to pick a color</button>
Value: 
<input />
</div>

<div class="well">
<button>Click here to pick a color</button>
Value: 
<input />
</div>

<div class="well">
<button>Click here to pick a color</button>
Value: 
<input />
</div>

<div class="well">
<button>Click here to pick a color</button>
Value: 
<input />
</div>

<div class="well">
<button>Click here to pick a color</button>
Value: 
<input />
</div>
</div>

<div class="right-block">
</div>

如果您对上面代码段中的 CSS 如何工作有任何疑问，请在下面的评论中提问。