堆叠覆盖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）和右侧{{}}即可实现您的需要。 {1}}。

示例：

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;
}

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