Css на одном месте

Css на одном месте

За столь продолжительный период верстки сегодня мне впервые пришлось столкнуться с необходимостью разместить на странице фиксированный блок (используя CSS-свойство position:fixed ), который бы при скролле страницы всегда сидел в одном месте окна браузера.

Информацию по этому поводу я, естественно, почитал на разных блогах и форумах. Но все решения, которые я встретил, описывают немного не то, что понадобилось мне. Они описывают, как зафиксировать блок относительно края окна браузера, например, левый сайдбар или шапку.

У меня же стояла несколько иная задача. Имеется основной родительский блок с фиксированной шириной, выровненный по центру окна ( margin: 0 auto ). И необходимо справа от этого блока поместить фиксированный блок, т.е. позиционироваться он должен не от края окна браузера, а от основного блока. Вот готовый пример, о котором я веду речь.

Ниже расскажу, как я это реализовал, с учетом следующих моментов:

  • во-первых, с надеждой на то, что кому-нибудь это пригодится;
  • во-вторых, как шпаргалка себе на будущее (или написание поста с целью закрепления материала, аля «повторение — мать учения», моя практика показывает, что написание поста с решением какой-либо незнакомой мне до этого задачи очень хорошо помогает запомнить это самое решение);
  • в-третьих, с надеждой на то, что кто-то предложит более элегантное решение.

HTML-код

Имеем следующую базовую разметку:

CSS-код

Имеем следующие стили для основного и контентного блоков:

Т.е. у нас имеется основной контейнер шириной 885px, размещенный по центру окна, из них 642px отдано под контент, который будет находиться в левой части, а 243px в правой части выделяем под наш фиксированный блок шириной в 240px. Собственное это и делает идентификатор #wrapper .

Хочу заострить внимание на параметрах идентификатора #container , используемого для блока с основным контентом. Необходимо обязательно обозначить уровень этого слоя выше (здесь — z-index: 10 ), чем слой с фиксированным блоком (это согласно условиям моего примера, в других случаях сие может быть не обязательным), иначе в FireFox’e нельзя будет выделить текст в этом блоке в части высоты, равной высоте фиксированного блока.

Читайте также:  Geforce gt 440 2gb характеристики

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

Подобрав отступ с помощью свойства left: 323px; к блоку .fixed , отцентрированному относительно окна браузера ( margin: 0 auto; ), я сдвинул фиксируемый блок в предназначенное для него место.

В результате у меня получилось то, что я и хотел. Смотрим пример всего описанного выше.

Данный пример прекрасно работает в следующих браузерах: Opera, FireFox, Safari, IE7, но не работает в…

Internet Explorer 6

Ну а как же без него? 🙂 Само-знамо, курилка даже не представляет, ЧТО есть значение position: fixed , поэтому опять приходится латать его дыры его же ява-скриптами.

Чтобы укротить IE6 для нашей задачи, необходимо, во-первых, вместо position: fixed использовать абсолютное позиционирование position: absolute , во-вторых, применить expression , который и фиксирует блок. И поместим код в условные комментарии.

Вот что у нас получилось:

Объясняю, для чего здесь понадобились свойства left: 50%; и margin-left: -321px; . Дело в том, что, если использовать тот же самый отступ слева, что и для других браузеров, ( left: 323px; ), то фиксированный блок в IE6 ведет себя неправильно — при сужении окна браузера он смещается вправо от основного блока. Поэтому при помощи left: 50%; (данное свойство имеет здесь решающее значение, выявил «методом тыка») и следующего дополнительного отрицательного отступа блок возвращается на предназначенное ему место.

Все. Теперь и в IE6 мы наблюдаем тот же результат, что и в остальных браузерах.

Читайте также:  Core did что это

Однако, если посмотрите на пример в этом браузере, то заметите следующий артефакт — при прокручивании страницы блок некрасиво подергивается. Чтобы устранить данный недостаток, необходимо тегу body назначить прозрачный фоновый рисунок с фиксированным позиционированием, т.е. вот так:

Что интересно, даже не обязательно наличие картинки pixel.gif на сервере, достаточно просто этой записи, чтобы дергание исчезло.

К сожалению, не всегда можно будет воспользоваться данным исправлением, поскольку фон body уже может быть занят элементом дизайна сайта. Тогда этот грех останется за IE6.

Вот, собственно, и все, о чем хотелось сказать в настоящей статье.

Отличный подарок на день рождения мальчику — игрушки лего, которые в большом ассортименте представлены в интернет-магазине «Lego для всех». Осуществляется доставка как в пределах России, так и по СНГ.

Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1.0+ 6.0+ 1.0+ 1.0+ 2.3+ 5.0+

Задача

Задать положение блочного элемента, чтобы он всегда оставался на одном месте при прокрутке страницы.

Решение

«Замораживание» элемента в определённом месте веб-страницы происходит с помощью стилевого свойства position со значением fixed . При этом положение элемента не меняется даже при прокрутке страницы с помощью скроллинга. Сами координаты задаются через свойства left , right , top и bottom , которые соответственно определяют положение от левого, правого, верхнего и нижнего края окна браузера (пример 1).

Пример 1. Использование position

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1. Обратите внимание, что положение элемента не меняется при прокрутке страницы вниз.

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

Читайте также:  Asus p5gc mx прошивка bios

Для того, чтобы закрепить какой-то элемент, будь то картинка или div или ещё бог знает чего, необходимо задать свойство position со значением fixed.

Это зафиксирует элемент на экране и при прокрутке он не будет двигаться. Если вы хотите так же задать позицию на экране, где должен располагаться элемент используйте свойства top, left, bottom, right. Которые задают координаты элемента относительно сторон экрана, т.е. не зависят от того, сколько высоты страницы прокручено.

Так же часто бывает, что даже при использовании position вы не видите зафиксированный элемент, если у вас уже написано куча кода или он не ваш, то скорее всего его перекрывают другие элементы с большими значениями z-index. Подробнее об этом вы можете прочитать в нашей статье — Слои на задний/передний план при помощи CSS: z-indexлои на задний/передний план при помощи CSS: z-index.

Вот пример кода, который будет фиксировать блок с текстом на странице:

Результат вы все так же можете увидеть слева.

Ссылка на основную публикацию
Adblock detector