Розкладка в CSS: позиціювання

1. Короткий огляд
2. Static
3. Absolute
4. Fixed
5. Relative
6. абсолютне позиціонування
7. Склянка
8. Fixed
9. автоматичні розміри
10. засада
11. відносне позиціонування
12. Реальний стан речей
13. Атоматіческая розміри
14. Fixed
15. висновок

Наша взаимовыгодная связь https://banwar.org/

У CSS існує, за великим рахунком, чотири способи розкладати бокси по сторінці: прямий потік, позиціонування, float'и і таблиці. На жаль, жоден з них не дає повного набору засобів, якими можна було б зверстати що-небудь реальне. Тому використовуються вони зазвичай все разом, та ще й з неабиякою часткою хаков для обходу несумісності в реалізаціях стандарту.

У наступних статтях я збираюся описати всі їх по порядку, з плюсами, мінусами і Хакамі. А потім зроблю підсумкову практичну статтю, де покажу, як створюється розкладка, наближена до реальності.

Почну з позиціонування.

Короткий огляд

Суть позиціонування дуже проста: будь-бокс можна розташувати в будь-якому місці сторінки, задавши йому точні координати. Саме будь-хто, а не тільки <div>, як багатьом здається; ви легко можете позиціонувати хоч <b>, якщо дуже захочеться :-)

Звичайно, якби все було так просто, то окремої статті б це явно не заслуговувало. Складнощі починаються тоді, коли хочеться робити розтягнуті колонки, панельки та інше. Іншими словами - зав'язувати положення і розміри боксів один на одного.

Існують чотири способи позиціонування боксів:

Static

Це спосіб за замовчуванням, можна сказати, ВІДСУТНІСТЬ якого б то не було спеціального позиціонування, а просто викладання боксів одного за іншим зверху вниз. Цей порядок якраз і є згаданий мною прямий потік. Там, звичайно, є і всередині нього теж всякі складності, але зараз я про них говорити не буду.

Absolute

Бокс з абсолютним позиціонуванням розташовується за заданими координатами, а з того місця, де він повинен був би бути, він видаляється, і в цьому місці відразу починають розкладатися наступні бокси. Кажуть, що він "виключається з потоку".

Fixed

Поводиться так само, як absolute, але при цьому він не Скрол разом з рештою сторінкою.

Relative

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

А тепер - заглибимося.

абсолютне позиціонування

Отже, щоб розташувати бокс абсолютно, йому треба задати потрібний тип позиціонування і координати:

#somebox {position: absolute; left: 100px; top: 100px; bottom: 100px; right: 100px; }

Координати означають відстань боксу від країв: top: 0 означає, що бокс притиснутий до верхнього краю, right: 10px - що відстоїть на 10 пікселів від правого краю і т.д. Будь-яка з координат необов'язкова. У разі, якщо координати не ставлять вертикального або горизонтального положення, то воно залишається таким же, яким було б без позиціонування. Тобто в разі, коли у нас є два довільних боксу один за іншим "box1" і "box2":

<Div id = "box1"> ... </ div> <div id = "box2"> ... </ div>

... і другий ми позиціонуємо так:

# Box2 {position: absolute; left: 150px; }

... то по вертикалі він залишиться прямо під першим боксів, а по горизонталі буде відстояти від лівого краю на 150 пікселів.

Склянка

Можливо деяких особливо уїдливих читачів уже якийсь час турбує питання, який я навмисно опустив на початку: щодо яких таких країв рухають бокс координатні властивості? Питання це не зовсім тривіальний, тому що хоча інтуїтивно і здається, що все позиціонується "від вікна", це не завжди так.

Сторінка починає розкладатися в своєрідний перевернутий "стакан", що починається від верху вікна, обмежений з боків і нескінченно триває вниз. Якщо все блоки статичні, то вони так в цей стакан і розкладаються один за іншим. Якщо в цьому потоці з'являється позиційований бокс, то його координати обчислюються від сторін цього самого склянки.

Але найцікавіше, що цей позиційований бокс сам всередині себе створює такий же стакан, і все його діти (бокси, що знаходяться у нього всередині) позиціонуються вже щодо нього, а не щодо вікна. І всередині нього відбувається те ж саме: будь-який розташовується (НЕ static) бокс створює усередині себе такий стакан.

Використовуючи більш прийняті в CSS терміни, цей стакан називається "містить блоком" (containing block).

Fixed

Бокс з position: fixed - це, в общем-то, різновид того ж абсолютного позиціонування. Єдина різниця полягає в тому, що при прокрутка вікна ці бокси залишаються на місці. Цей ефект широко використовується на сторінках веб-додатків для усіляких прилипають блоків меню і тулбаров, які як раз і повинні себе так вести.

З fixed-боксами пов'язаний один среднеінтересний момент. Для звичайних абсолютних боксів браузер завжди зробить досить скроллбар, щоб їх можна було переглянути. А ось якщо фіксований бокс не влізе у вікно, то доскроліться до нього буде вже не можна.

автоматичні розміри

У абсолютного позиціонування є вкрай корисну властивість: їм можна задавати розміри бокси по їх зовнішніх кордонів. Раніше я розповідав про те, що якщо ставити розміри властивостями width і height, то відступи, рамки і межі додаються до них. Це незручно, коли треба вмістити бокс з усіма оточуючими його красивостями в дірку точно відомого розміру. При абсолютному позиціонуванні ця проблема вирішується зазначенням координат протилежних сторін одночасно:

#somebox {position: absolute; top: 0; left: 0; right: 0; margin: 20px; padding: 20px; }

Цей бокс із заданими лівої і правої координатами буде точно стосуватися бічних сторін свого стака ... е-е-е ... що містить блоку, який би ширини той не був, а margin'и і padding'і будуть відкладатися всередину боксу.

Це властивість неоціненно при створенні розкладок веб-додатків, де перекриваються бокси повинні займати весь екран за певною сіткою:

засада

Абсолютне позиціонування - дійсно потужний механізм розкладки, але універсальним засобом він, все ж, не є.

Головна проблема полягає в тому, що координати і розміри боксу можна задати тільки щодо містить блоку, в якому він лежить. А дуже часто хочеться іншого.

Найпростіший приклад - абсолютним позиціонуванням не можна зробити саму традиційну розкладку: заголовок, вміст будь-якої висоти в кілька колонок і нижній блок. Зазвичай виходить таке:

Тут видно дві проблеми:

• Колонки не виходить вирівняти по висоті, тому що колонки один в одному не лежать, і в CSS немає засобів сказати "висота як ось у того іншого боксу".

• Нижній блок провалюється за колонки, тому що вони вилучаються з потоку, і нижній блок по висоті не штовхають. І його не можна абсолютно позиціонувати під найвищою колонкою, тому що в CSS немає засобів сказати "верх під тим іншим боксом".

відносне позиціонування

Відносне позиціонування - дивна штука. Якщо судити по картинці вище, то воно схоже на абсолютне, але до нього чогось додається дивний ефект: бокс продовжує займати місце в потоці. Дійсно, саме для позиціонування боксів цей метод використовується рідко. Хоча зрідка трапляються ситуації, коли треба заради візуальних ефектів підсунути один бокс під інший.

Найчастіше ж position: relative використовують взагалі без завдання зсувів. У цьому випадку він веде себе як звичайний статичний бокс, але оскільки він все таки не статичний, то він створює усередині себе містить блок, той самий, щодо якого будуть позиціонуватися бокси всередині нього.

Ось приклад, який показує корисність цієї властивості. Нехай у нас є три блоки: "заголовок", "вміст" і "низ", а всередині "вмісту" лежить блок "про автора":

<Div id = "header"> </ div> <div id = "contents"> <div id = "author"> </ div> ... </ div> <div id = "footer"> </ div >

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

А тепер нам хочеться всередині вмісту блочок про автора розташувати так, щоб він був точно в правому верхньому куті вмісту.

Напишемо йому:

#author {position: absolute; top: 0; right: 0; }

Але цього недостатньо, тому що містить блоком для нього зараз є всі вікно, і блок про автора поїде поверх заголовка. Точно поставити йому відстань від верху теж не можна, тому що розмір заголовка у нас може бути різний. Наступна думка - зробити блок вмісту теж абсолютним, тоді він стане містить блоком. Але тоді він сам висмикається з потоку і низ притулиться прямо до заголовку.

Ось це і є випадок, в якому працює position: relative. Якщо ми поставимо його блоку вмісту, то він нікуди не дінеться з потоку, але в той же час стане містить блоком, і "про автора" розташується в його правому верхньому куті.

Реальний стан речей

Реальність, як завжди, накладає на розробника ще більші обмеження, ніж сама технологія в чистому вигляді. Найбільшу проблему представляє Internet Explorer для Windows, підтримка CSS в якому не оновлювалася вже 4 роки. Взагалі, у нього багів, пов'язаних з CSS'ом досить багато, і всі вони докладно описані на сторінках інтернету. Для вичерпного переліку раджу покопатися в " css-discuss wiki "І в" Position is everything ". Я ж зупинюся на двох особливо помітних проблемах.

Атоматіческая розміри

У WinIE не працює завдання розмірів боксів через одночасну установку координат протилежних сторін. Це, однак, досить легко обходиться використанням цікавою здатності IE розраховувати значення властивості для CSS за допомогою Javascript. Візьмемо той же приклад з боксом у всю ширину і margin'амі і padding'амі по 20 пікселів:

Код для цього виглядає так:

#somebox {position: absolute; top: 0; left: 0; right: 0; margin: 20px; padding: 20px; border: solid red 1px; }

Тут IE просто проігнорує right: 0 і бокс залишиться у лівого краю, обтягуючи свій вміст:

Щоб такого не було, йому треба задати якусь конкретну ширину. Але оскільки вказати її точної цифри ми не можемо, тому що невідомо, яка ширина буде у батьківського боксу, то ми змусимо IE вираховувати цю ширину:

#somebox {position: absolute; top: 0; left: 0; right: 0; margin: 20px; padding: 20px; border: solid red 1px; width: expression (document.body.offsetWidth-82); }

document.body.offsetWidth - це поточна ширина боксу сторінки. А число 82 - це margin'и + padding'і + border'и з двох сторін боксу.

Якщо потрібно взяти ширину не "body", а якогось довільного боксу, то йому треба дати id (нехай буде "mainbox") і тоді його ширина буде братися так: mainbox.offsetWidth.

Fixed

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

Існує спосіб зімітувати поведінку фіксованого позиціонування (щоб бокс не Скрол) за допомогою абсолютного. Візьмемо таку структуру:

<Div id = "contents"> </ div> <div id = "menu"> </ div>

Ми хочемо, щоб блок меню висів фіксовано в якомусь місці, а вміст б вільно Скрол у вікні. Якщо поставити для меню position: absolute, то воно буде Скрол разом з вікном, тому що воно лежить всередині скролящегося вікна. Геніальний же хак полягає в тому, щоб змусити Скрол НЕ вікно, а тільки бокс вмісту:

html {width: 100%; height: 100%; overflow: hidden; } Body {width: 100%; height: 100%; margin: 0; padding: 0; overflow: auto; } #Menu {position: absolute; top: 20px; left: 20px; }

В деталях це означає наступне. Поведінка елемента "html" багато в чому відповідає за поведінку вікна (так уже склалося). Ми говоримо йому зайняти все вікно цілком і відключаємо скролінг (overflow: hidden). Зате елементу "body" говоримо за розміром зайняти, знову-таки, все вікно, а скролінг включаємо (overflow: auto). І тепер абсолютно підвішений бокс "menu" не рухається, тому що Скрол не його містить блок "html", а зовсім інший - "body".

Все це виглядає злегка наворочено, але з часом має стати більш зрозумілим. В общем-то, це досить глибока магія, і на початкових етапах зазвичай не потрібно :-).

висновок

Позиціонування має свої плюси і мінусами.

Найбільший мінус - це неможливість зав'язати розміри і положення довільних боксів один на одного, що змушує використовувати тільки жорстко задані розміри боксів.

Найбільшим плюсом є повна незалежність візуального розташування від порядку елементів в HTML. Це дозволяє кардинально міняти основну сітку розкладки сторінки з мінімальними зусиллями.

Ця стаття - частина знаходиться в процесі написання циклу під робочою назвою "Підручник". Я рекомендую ознайомитися і з іншими статтями, які можна знайти в категорії " Підручник ", Де вони зараз зібрані в зворотному хронологічному порядку.