HTML CSS шпаргалка Рецепты, статьи, советы, приемы html css

«
»

Position fixed ie6

В этом топике посмотрим, как в шестом ие съэмулировать свойство position:fixed.

Итак, есть 2 способа эмуляции в ие6 свойства position:fixed. Первый способ с использованием expression и второй способ чисто на css (но тоже с некоторым обманом браузера ;) )

Position fixed в ie6 с помощью expression

Можно написать выражение, которое будет всегда высчитывать положение блока относительно верхней границы документа и тем самым эмулировать свойство position:fixed. Подробнее об этом способе смотрите тут: artlebedev.ru/tools/technogrette/html/fixed_in_msie. Но мне не нравится этот способ тем, что мы и так на не очень быстрый браузер вешаем еще дополнительный expression.

Следующий способ основан на чистом css без всяких дополнительных скриптов.

Position fixed в ie6 с помощью css

В этом методе position:fixed не будет как такого. Идея состоит в следующем. Сначала мы задаем высоту и ширину 100% для html и body, ставим им overflow:hidden. Затем, делаем блок, который будет «заменой» элемента body. Ставим ему также 100% высоту и ширину, overflow:auto (чтобы появлялись скроллы при необходимости) и position:relative (чтобы внутри этого блока можно было позиционировать другие блоки). А сам блок, которому нужен position:fixed помещаем вне блока-«замены» body, ставим ему абсолютное позиционирование с нужными координатами, и, как вы догадались, этот блок будет всегда находиться в одном месте экрана, а сам сайт будет прокручиваться внутри блока-«замены». Вот примерный код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>position fixed ie6</title>
<style type="text/css">
html, body {
	width:100%;
	height:100%;
	overflow:hidden;
	padding:0;
	margin:0;
}
#main {
	border:1px solid #666;
	width:100px;
}
#container {
	width:100%;
	height:100%;
	overflow:auto;
	position:relative;
}
.box {
	width:100px;
	height:100px;
	background:#CCC;
	position:absolute;
	right:0;
	top:200px;
}
</style>
</head>
<body>
<div class="box"> Я блок с position:fixed </div>
<div id="container">
  <div id="main"> Бывает так, ты замер и замерз, и нет вокруг ни солнца, ни птиц, ни ветра... и в мире правит Position fixed. Настоящий мужчина не боится Position fixed. Position fixed сделал свое дело, Position fixed хочет еще раз. Часто Position fixed как бы и не скрыт, но и в глаза не бросается, поэтому знакомство с ним оказывается для многих личным переживаемым опытом, своего рода откровением. Position fixed стимулирует мысли и идет всегда в ногу со временем. Некий сотрудник, ныне бывший, написал публичное обращение, в котором говорилось, что руководство корпорации зажирело и погрязло в Position fixed. На что руководство отреагировало однозначно. После чего опальный сотрудник предал анафеме всё правительство, администрацию родного города, других шишек и вообще всех их предшественников. На что пресс-центр пожал плечами, покрутил пальцем у виска и заявил: «когда Господь оставляет и наказывает человека, он лишает его разума. Именно это и происходит в данном случае». Продолжение этой забавной истории, я уверен, еще последует. Position fixed. Поясните скрытый смысл выражения. Наверное, потому что мы его не обмыли. Воообще прелесть, конечно, с Position fixed играемся как дети малые. Как немного нужно для счастья. Где жизнь, там Position fixed. А вот «Dexif noitisop» – это Position fixed наоборот. </div>
</div>
</body>
</html>

Метки: , ,

Запись опубликована 19.09.2009 в 23:29 и размещена в рубрике css. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.

Комментарии (3) на “Position fixed ie6”

  • lexix:
    13.11.2010 в 05:00

    ОГРОМНОЕ СПАСИБО
    наконец нашел работающее решение без глюков

  • Денис:
    30.01.2011 в 22:44

    *html #top {
    position: absolute;
    top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + ‘px’ );
    }

  • vital:
    21.12.2011 в 17:33

    Привет всем! очень рекомендую, — нашел классный сайт — Портал игр. Я там модератор

Оставить комментарий

Для вставки кода используйте <code> ... </code>.



Самые комментируемые

Облако тегов

Нет тегов найденных по заданным критериям.

Опрос