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

Absolute position for color picker in html with css

本文关键字：选择器 位置 css html 带有 颜色      更新时间：2023-09-26

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

在我的索引中.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/我希望颜色选择器位于图像顶部。

这是更新的小提琴

.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 索引 = 1 添加到颜色选取器

注意：我添加了自己的颜色选择器，它是本机html5颜色选择器，它可以工作但是，您的 JQuery 生成的一个不起作用，但我没有检查为什么

相关文章：