CSS Фиксированное позиционирование блоков без использования position:fixed

Очень часто приходится верстать макеты, в которых попадаются элементы, которые нужно зафиксировать на одном месте при прокрутке основного контента страницы. Обычно для верстки таких блоков применяется css-свойство position:fixed. Однако часть браузеров до сих пор не поддерживает это css-свойство. И здесь речь идет не только о Internet Explorer 6, но и о Mobile Safari, который также не поддерживает position:fixed на операционных системах iOS до версии 5. А так как некоторые макеты сайтов должны безукоризненно отображаться на iPhone и iPad, то можно воспользоваться небольшим трюком в CSS, который позволит сделать такие фиксированные блоки, но без использования свойства position:fixed.

Все, что потребуется — это завести дополнительный блок (в этом примере это блок с классом «.l-body»), к которому перейдут функции тега . Ширину и высоту этого блока нужно растянуть до ширины и высоты рабочей области окна браузера, а у тега <body> нужно скрыть полосы прокрутки. И тогда фиксированные блоки нужно будет размещать внутри тега <body> как блоки с position:absolute, а основной контент страницы — в допонительном блоке «.l-body».

<div class="l-body">
	<div class="b-content">
		<!-- Place content here -->
	</div>
</div>
<div class="b-fixed">
	It's fixed block!
</div>

И css-свойства для реализации этого трюка:

body, html {
	height:100%;
	overflow:hidden;
}
 
.l-body {
	height:100%;
	overflow:auto;
}
 
.b-content {
	height:2000px;
}
 
.b-fixed {
	width:200px;
	height:50px;
	left:0;
	top:0;
	position:absolute;
	background:#ccc;
}

Таким образом, приведенный выше код выведет серый блок размером 200×50 с фиксированным позиционированием в верхнем левом углу страницы. Блок «.b-content» добавлен только для того, чтобы на сверстанной странице появилась полоса прокрутки. Также стоит отметить, что для того, чтобы растянуть блок «.l-body» на высоту окна браузера требуется явно указать высоты всех родительских блоков, т.е. <html> и <body>.

Сам трюк не новый и уже многократно описывался на многих сайтах. Он довольно прост и не требует использования javascript. Кроме того блоки, заверстанные таким образом не дергаются при прокрутке в IE6 и в Mobile Safari. То есть это полноценные блоки с фиксированным позиционированием, только без использования position:fixed.