spectrum.js 平面颜色选择器 - position:fixed header

Question

我在具有 position:fixed header 的页面中使用 spectrum.js 平面颜色选择器。滚动页面时选择器选项与 header 重叠。

我找到了 this issue，但在我看来它适用于包含在固定容器中的拾取器，而不是相反。

感谢您的帮助。

Answer 1

使用 F12 工具，我看到颜色选择器容器有 sp-container class。在 spectrum.css 中，为 class 定义的样式显示如下 z-index 属性:

.sp-container {
    ...
    z-index: 9999994;
}

如果您为固定 header 设置 z-index: 9999995（或更多），颜色选择器框将不会与其重叠。

$("#inputColor").spectrum({
    color: "#f00"
});

#divHeader
{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    color: #CCC;
    background: #333;
    padding: 8px;
    z-index: 9999995;
}

#divContainer
{
    margin-top: 40px;
    width: 300px;
    height: 1200px;
    background-color: #E0E0E0;
    border: solid 1px black;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
<div id="divHeader">Fixed header</div>
<div id="divContainer">
    <input id="inputColor" type="text" />
</div>

spectrum.js 平面颜色选择器 - position:fixed header

spectrum.js flat colorpicker - position:fixed header

javascript

css

spectrumjs