Position fixed для IE6

Nigelist · September 29, 2010

Есть плавающий блок (position fixed) и во всех браузерах нормально отображается. А в IE6 position fixed оказывается не пашет. Искал в гугле, но там описаны способы закрепляющие блок в топе. А мне необходимо закрепить этот слой в боттом.

Подскажите как это сделать? Вот CSS того самого блока:

width:200px; background:#F8F8F8; padding:2px; border:1px #CDCDCD solid; position:fixed; right:4px; bottom:2px; z-index:81

gordi · October 3, 2010

1) Смотри, выходит ты задал главному блоку Position:Fixed и при сужении окна прокрутка не появляется. Это ты имел ввиду?
2) А покажи тот же пример с абсолютом, ведь по идее полоса прокрутки тоже не появится, а разве я не прав?

Даже если только у одной колонки (блока) будет Position:Fixed при уменьшении размеров окна браузера при появлении горизонтальной прокрутки

фиксированный блок будет наезжать или прятаться под другую колонку (блок)

Реальный дизайн на основе position:absolute; - http://trifler.ru/theme/design_fixcontentfix.html левая фиксированная колонка уходит за вертикальную границу окна браузера при уменьшении рабочей области, но правая фиксированная колонка двигается вместе с областью контента (центральной колонкой), а не прячется или наезжает под/на нее.

Edited October 3, 2010 by gordi

psywalker · October 3, 2010

Ну вот смотри, правая колонка тоже двигается вместе с контентом

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
	*{ margin:0; padding: 0;}
	#wrap { position: relative; border: 1px solid #000;}
	#content { margin-right: 320px; background: blue; height: 100px;}
	#fixed { position: fixed; right: 0; top: 0; width: 300px; height: 100px; background: red;}
</style>
</head>

<body>
<div id="wrap">
	<div id="content"></div>
	<div id="fixed">Fixed</div>
</div>
</body>
</html>

gordi · October 3, 2010

Ну вот смотри, правая колонка тоже двигается вместе с контентом...

Уверен

Смотри в FF

Горизонтальная прокрутка отсутствует

Не катит.

psywalker · October 3, 2010

Да, тут согласен, видимо дело в том, что у position:fixed; блоком-контейнером является окно просмотра, а не какой нибудь элемент.

А вообще как считаешь, есть ли минусы у эмуляции?

gordi · October 3, 2010

Да, тут согласен, видимо дело в том, что у position:fixed; блоком-контейнером является окно просмотра, а не какой нибудь элемент.
А вообще как считаешь, есть ли минусы у эмуляции?

Да нет, особых проблем.

Даже последние версии OPERA ведут себя прилично

psywalker · October 3, 2010

Да нет, особых проблем.
Даже последние версии OPERA ведут себя прилично

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

gordi · October 3, 2010

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

Ну, а position:fixed; не обман?

По моему, его вообще, надо исключить из CSS

Если на абсолюте все правильно сделать, будет работать так, как надо.

psywalker · October 3, 2010

Ну, а position:fixed; не обман?
По моему, его вообще, надо исключить из CSS
Если на абсолюте все правильно сделать, будет работать так, как надо.

Спасибо за разъяснение и примеры. Пойду учиться дальше.

SelenIT · October 3, 2010

По-моему, позишн: фиксед как раз и придуман для небольших элементов (в первую очередь динамических), для которых налезать на другие блоки и оставаться под рукой всё время, пока нужны — главное предназначение (всякие вспомогательные меню, панели инструментов...). Фиксированные колонки — другое дело. Фактически там мы имеем не набор фиксированных элементов, а единственный прокручиваемый элемент (а-ля iframe) в непрокручиваемом обрамлении 100%-ной высоты — и да, это как раз задача для связки absolute+overflow. По-моему, это просто существенно разные классы задач, практически не пересекающиеся (незачем переверстывать обычный сайт под 100% ради фиксирования одной всплывающей панели, но и не надо пытаться привязывать фикседом полдизайна — и всем будет счастье). Хотя лично меня потеря скроллинга мышиным колесом от увода курсора с основного текста (я привык так делать, чтоб курсор не мешал) реально вырубает...

Nigelist · October 4, 2010

По-моему, позишн: фиксед как раз и придуман для небольших элементов (в первую очередь динамических), для которых налезать на другие блоки и оставаться под рукой всё время

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

gordi · October 4, 2010

Для разных задач, разные подходы.

К сожалению, кроме плюсов всегда есть минусы.

Универсальных, на все случаи жизни, решений нет,

так происходит и с position:fixed; и с его эмуляцией на основе position:absolute;

Знание методов и приемов, позволяющих добиться оптимального результата,

никому не помешают

... Хотя лично меня потеря скроллинга мышиным колесом от увода курсора с основного текста (я привык так делать, чтоб курсор не мешал) реально вырубает...

С курсором есть проблема, но можно и так:

http://trifler.ru/theme/design_fixedright.html

http://trifler.ru/theme/design_fixedleft.html

А вот с решением на position:fixed подобное сделать не представляется возможным.

Edited October 4, 2010 by gordi

SelenIT · October 4, 2010

Фиксед просто, по моим понятиям, сугубо для малых площадей, так что вероятность "застрять" курсором на фиксированной панели инструментов гораздо меньше, чем на непрокручиваемой колонке. И на design_fixedright у меня, к сожалению, скроллинг при нахождении курсора над колонкой всё равно пропадает (FF3.6.10, Op. 10.62, обе под WinXP Pro). Плюс скроллинг "листа, подшитого спиралью" слегка вгоняет глаза и мозг в когнитивный диссонанс (не знаю, может, так и задумано — эффект прикольный, но непривычный.

Но техника полезная (для особых случаев, но пару лет назад мне попадался как раз такой), спасибо за разработку и примеры!

gordi · October 4, 2010

Фиксед просто, по моим понятиям, сугубо для малых площадей, так что вероятность "застрять" курсором на фиксированной панели инструментов гораздо меньше, чем на непрокручиваемой колонке. И на design_fixedright у меня, к сожалению, скроллинг при нахождении курсора над колонкой всё равно пропадает (FF3.6.10, Op. 10.62, обе под WinXP Pro). Плюс скроллинг "листа, подшитого спиралью" слегка вгоняет глаза и мозг в когнитивный диссонанс (не знаю, может, так и задумано — эффект прикольный, но непривычный.

Fixed можно и нужно использовать только тогда, когда есть необходимость сделать фиксированный header или footer, тут проблем нет.

Но, как только нужно зафиксировать колонку (блок) слева или справа от основной колонки, сразу проблемы при появлении горизонтальной прокрутки и тут без эмуляции на основе абсолюта не обойтись

Но техника полезная (для особых случаев, но пару лет назад мне попадался как раз такой), спасибо за разработку и примеры!

Собственно и у меня с этого все началось.

Попросили сделать типа http://trifler.ru/theme/design_fixedright.html, но продвинутый заказчик попался, когда сделал на position:fixed, он меня огорошил проблемами поведения разметки при уменьшении рабочей области окна браузера и разных разрешениях, тогда-то и пришла мысль в таких случаях не использовать фиксед, а обходиться абсолютом.

Но тут тоже все не просто.

Позиционирование обычной колонки и фиксированной колонки относительно друг друга, требует процентных величин, а с процентами не все ладно

Даже делал со скриптом который определял разрешение экрана монитора и подставлял соответствующие пиксели,

пример http://trifler.ru/multiagent/

Правда и это не полноценный выход из положения, все разрешения перебрать не представляется возможным

Edited October 4, 2010 by gordi

SelenIT · October 4, 2010

как только нужно зафиксировать колонку (блок) слева или справа от основной колонки

Для меня эта задача формулируется как "имитировать фреймы" (по крайней мере, у меня всё началось с необходимости замены таковых. Согласен, fixed не для этого (даже про хидер/футер еще можно поспорить, вот кнопка "обновить комментарии" на Хабре — fixed без вариантов). Эх, как бы вот еще прокрутку укротить...

Edited October 4, 2010 by SelenIT

gordi · October 4, 2010

...Эх, как бы вот еще прокрутку укротить...

Был у меня такой вариант, случайно получилось

Организовался лишний блок без закрывашки - </div>

Никак не влиял на разметку в целом - не ломал ее, но макет не валиден по html

Там нахождение курсора мыши над фиксированной колонкой, а сделано все было на абсолюте,

позволяло прокручивать страницу, надо поискать, забавный случай, что и говорить

Edited October 4, 2010 by gordi

Nigelist · October 4, 2010

SelenIT, gordi, есть ли готовое решение для моего случая?

SelenIT · October 4, 2010

Nigelist, вот так пойдет?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<style>
html, body { margin: 0; padding: 0; background: #fff url(about:blank) fixed; }
.fixed { position: fixed; right: 20px; bottom: 20px; z-index: 2; background: #ffc; padding: 15px; }
</style>
<!--[if IE 6]>
<style>
.fixed {
	position: absolute;
	top: expression(parseInt(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-20,10) + 'px');
	bottom: auto;
}
</style>
<![endif]-->
</head>
<body onload="for(var i=0;i<20;i++)document.body.appendChild(document.body.getElementsByTagName('p')[0].cloneNode(true))">
<h1>All your problems are fixed, aren't they?</h1>
<p>The box's position is calculated according to the 'absolute' model, but in addition, the box is fixed with respect to some reference. As with the 'absolute' model, the box's margins do not collapse with any other margins. In the case of handheld, projection, screen, tty, and tv media types, the box is fixed with respect to the viewport  and does not move when scrolled. In the case of the print media type, the box is rendered on every page, and is fixed with respect to the page box, even if the page is seen through a viewport (in the case of a print-preview, for example). For other media types, the presentation is undefined. Authors may wish to specify 'fixed' in a media-dependent way. For instance, an author may want a box to remain at the top of the viewport on the screen, but not at the top of each printed page.</p>
<div class="fixed">
	<h1>Fixed block</h1>
	<p>I'll stay here whatever happens!</p>
</div>
</body>
</html>

Nigelist · October 4, 2010

SelenIT, блин, даже IETester крашится, при ресайзе окна. Тяжеловатая функция... А вы в чем тестили?

И можно ли сделать bottom не 20px, а 2px?

Edited October 4, 2010 by Nigelist

SelenIT · October 4, 2010

Тестил в MultipleIE, меняя цифру в усл. комментах (иначе не понимает), но ничего не крэшилось и не тормозило (правда, машина хорошая).

Отступ снизу можно сделать какой угодно, в экспрешне это число, вычитаемое из суммы document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight

Яваскрипт на body.onload можно выкинуть, это тупо для быстрой генерации большого объема текста (для скроллинга) при компактном размере исходника . Проще забить статикой...

Sign In

Position fixed для IE6

Question

Link to comment

Share on other sites

44 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information