Блог

Главная - Вопросы по программированию - spectrum.js flat colorpicker — позиция: фиксированный заголовок

spectrum.js flat colorpicker — позиция: фиксированный заголовок

#javascript #css #spectrumjs

#javascript #css #spectrumjs

Вопрос:

Я использую spectrum.js плоский указатель цвета на странице с position:fixed заголовком. Варианты выбора перекрывают заголовок при прокрутке страницы.

Я обнаружил эту проблему, но мне кажется, что она применима к средству выбора, содержащемуся в фиксированном контейнере, а не наоборот.

Спасибо за вашу помощь.

Ответ №1:

С помощью инструментов 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>