我在具有 position:fixed
header 的页面中使用 spectrum.js 平面颜色选择器。滚动页面时,选择器选项与标题重叠。
我找到了 this issue ,但在我看来,它适用于包含在固定容器中的拾取器,而不是相反。
感谢您的帮助。
最佳答案
使用 F12 工具,我看到颜色选择器容器具有 sp-container
类。在 spectrum.css 中,为该类定义的样式显示以下 z-index
属性:
.sp-container {
...
z-index: 9999994;
}
如果为固定标题设置 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>
关于javascript - spectrum.js 平面颜色选择器 - 位置 :fixed header,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39895889/