Как заставить этот div показываться выше верхнего div?

Мой первый пост здесь, так что, пожалуйста, расскажите мне обо всех ошибках, которые я совершаю, и об общей культуре этих форумов.

пожалуйста, смотрите ниже.

http://jsfiddle.net/LGTp7/

<body>
    <div class="red">

    </div>
    <div class="outer">
        <div class="planner-table green">
            <div class="planner-row">
                <div class="planner-cell">
                    <div class="black"></div>
                </div>
            </div>
            <div class="planner-row">
                <div class="planner-cell">
                    <div class="blue"></div>
                </div>
            </div>
        </div>
    </div>
</body>

Пожалуйста, смотрите прикрепленную скрипку.

Это простое представление макета унаследованного проекта, blue square представляют собой бутстрап datetimepicker это было реализовано.

как бы то ни было, когда он выбран, он скрывает верхнюю часть сборщика за верхней частью. "RED" div,

date pickers Z-index is "9999 !important" в css. Как я могу получить blue box (представление выбора даты), чтобы показать над red div (верхний див)

Источник

3 ответа

Решение

Это из-за overflow-y: auto на .outer элемент, в сочетании с position: relative, Синяя коробка обрезается, потому что она выходит из контейнера. Вертикальное переполнение должно быть visible на это, чтобы сделать эту работу.

Теперь вам, безусловно, нужно position: relativeи я думаю, вам тоже нужно переполнение. Решение состоит в том, чтобы поместить их в разные элементы вместо одного. position: relative должен быть снаружи.

Один из возможных способов - это переполнение .planner-table-green, так что вы можете оставить все, что вам нужно, и все равно будет работать

.outer{
    position:relative;
}

.planner-table-green {
    overflow-y: auto;
}

Ничего общего с z-index, вам не нужно здесь, естественный порядок должен быть в порядке.

Я обнаружил проблему с помощью инспектора моего веб-браузера, систематически отключающего свойства CSS.

Источник 
.outer {
   overflow: visible;
}
Источник

Синий цвет останется только в родительских элементах div, за которыми он следует. Вам придется изменить положение на фиксированное, если вы хотите, чтобы оно игнорировало любую из его ветвей. Красный находится в div, отделенном от внешнего div, поэтому вы не можете его переместить.

Источник
Другие вопросы по тегам