如何将color picker的位置调整至按钮所在的同一区域？

我明白你的需求啦——就是想让点击按钮后弹出的颜色选择器，和按钮处在同一区域，而不是跑到别的地方去对吧？

原代码的问题分析 #

你原来的代码里把颜色输入框放在了一个hidden="true"的div中，这会让这个元素脱离正常的文档流，浏览器渲染颜色选择器时找不到正确的锚点位置，所以才会出现弹出位置偏离按钮的情况。

方案一：保留JS逻辑，调整布局与样式 #

我们可以把颜色输入框和按钮放在同一个容器里，用CSS隐藏它但保留在文档流中，这样触发它时，颜色选择器就会以它的位置（也就是按钮所在区域）为锚点弹出：

<div>
  <h1> Test </h1>
  <div style="position: relative; float:right;">
    <button onclick="myFunction()">Try it</button>
    <!-- 将颜色输入框放在按钮的父容器内，用CSS隐藏视觉效果 -->
    <input type="color" id="test" style="opacity: 0; position: absolute; top: 0; left: 0; width: 0; height: 0;">
  </div>
</div>

<script>
function myFunction() { 
  document.getElementById('test').click(); 
}
</script>

这里的关键是：

• 给按钮的父容器添加position: relative，确保内部绝对定位的元素以该容器为基准
• 用opacity: 0和width: 0; height: 0让颜色输入框完全不可见且不占用布局空间，但仍保留在文档流中

方案二：用Label替代按钮，无需JS #

更简洁的方式是使用<label>标签关联颜色输入框，点击标签就相当于点击输入框，完全不需要JavaScript：

<div>
  <h1> Test </h1>
  <div style="float:right;">
    <!-- 把按钮样式应用在label上 -->
    <label for="test" style="cursor: pointer; padding: 6px 12px; border: 1px solid #ddd; border-radius: 4px; background: #f5f5f5;">Try it</label>
    <!-- 隐藏颜色输入框 -->
    <input type="color" id="test" style="opacity: 0; position: absolute; width: 0; height: 0;">
  </div>
</div>

这个方案不仅代码更简洁，还能避免JS逻辑可能带来的问题，同时颜色选择器会自然地在label（也就是原按钮的位置）附近弹出。

内容的提问来源于stack exchange，提问作者lm42