Требуется фиксированный позиционный div внутри абсолютного позиционного div

Я использую плагин Snap.js - (он позволяет создавать прокручивающиеся боковые ящики/панели).

Он работает, создавая 3 абсолютно позиционированных divs, один из которых содержит основной контент.

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

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

Например:

<div style="position:absolute;">

    <div style="position:fixed;top:0">
       <!-- some content which needs to be pinned to top of window -->
    </div>

</div>

В настоящий момент я использую javascript для отслеживания смещения прокрутки и вручную настраиваю верхнюю позицию дочернего div, что не идеально подходит для производительности.

Любая помощь оценивается!

Ответ 1

Я сделал скрипку, показывающую мое обходное решение для javascript - он дрожит при прокрутке в Internet Explorer, любых идеях.

<div id="displayed-content" class="snap-content scrollable">
    <div><!-- regular content --></div>
        <div><!-- fixed content --></div>
    <div><!-- footer content --></div>
</div>

http://jsfiddle.net/bxRVT/

Ответ 2

Я немного догадываюсь о том, что вы пытаетесь сделать, но вы можете искать что-то вроде этого:

<div class="local-wrap">
    <div class="fixed">
       Some content which needs to be pinned to top of window
    </div>
    <div class="port">
        Regular content...
    </div>
</div>

и примените следующий CSS:

.local-wrap {
    position: relative;
}
.local-wrap .fixed {
    position: absolute;
    top: 0;
    left: 0;
    background-color: lightgray;
    width: 100%;
    height: 5.00em;
}
.local-wrap .port {
    position: relative;
    top: 5.00em;
    min-height: 10em;
    height: 15em;
    overflow: auto;
    border: 1px solid gray;
    border-width: 0 1px 1px 1px;
}

Демо скрипта: http://jsfiddle.net/audetwebdesign/pTJbW/

По существу, чтобы получить фиксированный блок относительно элемента блока, вам нужно использовать абсолютное позиционирование. Фиксированное позиционирование всегда относится к корневому элементу или портам просмотра, поэтому position: fixed не поможет вам.

То, что я сделал, это определить контейнер .local-wrap с двумя дочерними блоками, один из которых позиционируется абсолютно вверху .local-wrap, а другой - в регулярном потоке. Я использовал position: relative, чтобы расположить его ниже .fixed, но верхний край также работал бы.

Я установил некоторые высоты, чтобы продемонстрировать прокрутку содержимого в локальном окне/порту, но это можно изменить в зависимости от вашего дизайна и приложения.

Отказ

Я не знаком с snap.js, поэтому могут быть рассмотрены другие соображения.

Комментарий к CSS3 Transform и Fixed Elements

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

Для справки см. Сеть разработчиков Mozilla → Ссылка на CSS → Преобразование