Question

我正在使用https://github.com/bgrins/spectrum来显示颜色选择器。

在我的index.html中，我有：

<input id="colorPicker" style="position: absolute; top: 15px; left: 20px">

在我的js文件中，我写道：

$("#colorPicker").spectrum({
    color: "#f00"
});
$("#colorPicker").parent().css({position: 'relative'});
$("#colorPicker").css({top: 200, left: 200, position:'absolute'});

但是颜色选择器对于画布来说仍然不是绝对的，它只是放在左侧并将所有东西推向右边。

http://jsfiddle.net/raum9ebn/33/ 我希望颜色选择器位于图像的顶部。

Answer 1

以下是updated fiddle

<强> HTML

<div class="container">
    <img src="http://i.imgur.com/6l6v2.png" id="ballon" />    
    <input type="color" class="cp" />
</div>

<强> CSS

.cp{
    position: absolute; 
    z-index:1;
    top: 15px; 
    left: 20px;
}

.container{
    position: relative;
}

我解决了以下问题：

将两个控件，图像和颜色选择器封装到div中，并为div指定相对位置
将z-index = 1添加到颜色选择器

注意：我添加了自己的颜色选择器，它是原生的html5颜色选择器，它工作但是，你的JQuery生成的一个没有用，但我没有检查原因

带有CSS的html中颜色选择器的绝对位置

1 个答案: