Позиціонування блоку щодо батька за допомогою position fixed

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

Інформацію з цього приводу я, природно, почитав на різних блогах і форумах. Але всі рішення, які я зустрів, описують трохи не те, що знадобилося мені. Вони описують, як зафіксувати блок щодо краю вікна браузера, наприклад, лівий сайдбар або шапку.

У мене ж стояла дещо інша задача. Є основний батьківський блок з фіксованою шириною, вирівняний по центру вікна (margin: 0 auto). І необхідно праворуч від цього блоку помістити фіксований блок, тобто позиціонуватися він повинен не від краю вікна браузера, а від основного блоку. Ось готовий приклад. про який я веду мову.

Нижче розповім, як я це реалізував, з урахуванням наступних моментів:

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

Маємо наступну базову розмітку:

Маємо наступні стилі для основного і контентного блоків:

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

Хочу загострити увагу на параметрах ідентифікатора #container. використовуваного для блоку з основним контентом. Необхідно обов'язково позначити рівень цього шару вище (тут - z-index: 10), ніж шар з фіксованим блоком (це згідно з умовами мого прикладу, в інших випадках це може бути не обов'язковим), інакше в FireFox'e не можна буде виділити текст в цьому блоці в частині висоти, що дорівнює висоті фіксованого блоку.

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

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

В результаті у мене вийшло те, що я і хотів. Дивимося приклад всього описаного вище.

Даний приклад прекрасно працює в наступних браузерах: Opera, FireFox, Safari, IE7, але не працює в ...

Internet Explorer 6

Ну а як же без нього. ) Само-Певна, курилка навіть не уявляє, ЩО є значення position: fixed. тому знову доводиться латати його діри його ж ява-скриптами.

Ось що у нас вийшло:

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

Усе. Тепер і в IE6 ми спостерігаємо той же результат, що і в інших браузерах.

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

Що цікаво, навіть не обов'язково наявність картинки pixel.gif на сервері, досить просто цього запису, щоб смикання зникло.

На жаль, не завжди можна буде скористатися цим виправленням, оскільки фон body вже може бути зайнятий елементом дизайну сайту. Тоді цей гріх залишиться за IE6.

Ось, власне, і все, про що хотілося сказати в цій статті.

Чудовий подарунок на день народження хлопчику - іграшки лего. які у великому асортименті представлені в інтернет-магазині «Lego для всіх». Здійснюється доставка як в пределахУкаіни, так і по СНД.