Извините, что пришлось задать еще один связанный с position:fixed вопрос, но чтение других вопросов и веток форума не помогло мне с этим.
Следующий код является упрощенной демонстрацией того, как я использовал position:fixed в проекте до настоящего времени.Мое первоначальное (ошибочное) понимание position:fixed заключается в том, что он изначально фиксируется относительно первого позиционированного родительского контейнера, а после этого остается в этой позиции независимо от положения прокрутки окна просмотра.Теперь я понимаю, что это неправильно: на самом деле, позиции position:fixed относительно самого внешнего контейнера (т. Е. Тега html) и позиции position:absolute относительно первого родительского контейнера, который имеет позицию, отличную от static.
Читая различные другие вопросы по SO, я понимаю, что эффект, которого я пытался достичь с помощью position:fixed, - это тот, который пытались достичь многие другие люди, но потом понял, что это невозможно с помощью только CSS:, чтобы позиционировать элемент относительно контейнера, но затем оставить его там, где он находится относительно области просмотра, при прокрутке страницы.
Что меня смущает, так это то, что вышеизложенное именно то, чего я, казалось, достиг - по крайней мере, в FF и IE8.В приведенном ниже примере кода «фиксированное содержимое правой панели» изначально располагается справа от красного поля «центральное прокручиваемое содержимое» и вертикально на уровне вершины центрального содержимого.Центральное содержимое можно прокручивать, но правое содержимое остается там, где оно есть, как если бы оно изначально статически располагалось в нормальном потоке документов, но после этого остается фиксированным в области просмотра.
Теперь я понимаю, что это выглядит какработать 'в IE8 и FF просто потому, что я не указал top / bottom / left / right атрибутов для элемента fixed.Если я это сделаю, то пойму, что элемент fixed сразу станет позиционироваться относительно области просмотра.
Я предполагал - возможно, опасно - до сих пор, что если относительные позиции не указаны, то position:fixed по умолчанию разместит этот элемент там, где он обычно размещается статически.По крайней мере, FF и IE8, кажется, делают именно это.
Однако тестирование в Safari показывает, что Safari, похоже, размещает этот элемент fixed слева от своего контейнера.Другими словами, без позиционирования, мой элемент position:fixed находится не там, где он был бы, когда статически размещен, и при этом он не расположен в 0,0 относительно области просмотра.
Я полагался на очень плохо определенное поведение на сегодняшний день, и лучше ли мне все-таки прибегнуть к решению JavaScript для достижения этого фиксированного позиционирования?Или это поведение хорошо определено для IE / FF;а кто-нибудь может объяснить логику размещения Safari, пожалуйста?
<style type="text/css">
#content-centre {
margin: 0 auto;
width: 900px;
}
#header {
height: 55px;
position: fixed;
top: 0;
width: 990px;
}
#left-pane {
position: fixed;
top: 12px;
border: 1px green solid;
}
#main-pane {
left: 200px;
position: relative;
top: 66px;
width: 760px;
border: 1px yellow solid;
}
#container-1 {
border-top: 1px solid #FFFFFF;
float: right;
min-width: 130px;
padding-left: 20px;
border: 1px blue solid;
}
#container-0 {
margin-right: 20px;
min-height: 470px;
overflow: auto;
padding: 10px 0;
position: relative;
border: 1px red solid;
}
.side-info-list-fixer {
position: fixed;
}
</style>
<div id="content-centre">
<div id="header">
</div>
<div id="left-pane">
Fixed left pane content
</div>
<div id="main-pane">
<div id="page-module-containers">
<div id="container-1">
<div class="side-info-list-fixer"> Fixed right pane content </div>
</div>
<div id="container-0">
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
</div>
</div>
</div>
</div>