Позиціонування елементів HTML за допомогою каскадних таблиць стилів

WD-позиціонування-970131
Статус цього документа
2.1 "Абсолютне" позиціонування
Приклад 1
2.2 "Відносне" позиціонування
Приклад 2
2.2.1 Переміщення відносно розташовані елементи
Приклад 3
2.2.2 Розміщення 'абсолютні' позиціонують елементи відносно потоку
Приклад 4
2.3 Статичний Позиціонування
Приклад 5
2.4 Плавання елементи
Приклад 6
2.5 Видимість
Приклад 7
Приклад 8
2.6 Z-порядок
Приклад 9
3.1 'позиція'
3.1.2 <BODY> Елемент
3.2 "ліворуч", "зверху"
3.3 "ширина", "висота"
3.4 "кліп"
3.5 "переповнення"
3.6 "z-index"
3.7 "видимість"

WD-позиціонування-970131

W3C Робочий проект 31-Jan-1997

Ця версія: http://www.w3.org/pub/WWW/TR/WD-positioning-970131.html Редактор: Роберт Стівен , Компанія Hewlett Packard Co. Автори: Скотт Фурман , та ін., Netscape Communications Corp. Скотт Айзекс , та ін., Microsoft Corp.

Статус цього документа

Цей документ є проміжним проектом, створеним Радою редакційної редакції W3C як частиною Діяльність таблиць стилів ; вона достатньо стабільна, щоб її можна було опублікувати для публічного коментаря (до [email protected] ), але може змінитися до затвердження як (частина) рекомендації. Отже, вона не повинна бути реалізована як частина виробничої системи, а може бути реалізована на експериментальній основі.

Це робочий проект W3C для розгляду членами W3C та іншими зацікавленими сторонами. Він є проектом документа і може бути оновлений, замінений або застарілий іншими документами в будь-який час. Недоречно використовувати робочі проекти W3C як довідковий матеріал або цитувати їх як інші, ніж "незавершене виробництво". Список поточних технічних звітів W3C можна знайти за адресою http://www.w3.org/pub/WWW/TR . Оскільки робочі чернетки часто змінюються, рекомендується посилатися на останню URL-адресу, а не на URL-адресу цього робочого проекту.

Мова розмітки HyperText (HTML) - це проста мова розмітки, яка використовується для створення гіпертекстових документів, які переносяться з однієї платформи на іншу. Документи HTML - це документи SGML з загальною семантикою, які підходять для представлення інформації з широкого кола додатків. CSS ( Каскадні таблиці стилів ) є мовою таблиць стилів, яка може бути застосована до HTML, щоб керувати стилем документа: які шрифти та кольори використовувати, скільки простору потрібно вставити тощо. Наступна специфікація розширює CSS для підтримки позиціонування та видимості елементів HTML в тривимірному просторі. Знайомство з обома CSS1 і HTML 3.2 передбачається.

Анотація
Зміст
1. Введення
2 Елементи позиціонування за прикладом
2.1 «Абсолютне» позиціонування
2.2 "Відносне" позиціонування
2.2.1 Переміщення відносно розташованих елементів
2.2.2 Розміщення «абсолютних» позиціонуваних елементів щодо потоку
2.3 "Статичне" позиціонування
2.4 Плаваючі елементи
2.5 Видимість
2.6 Z-порядок
3 Властивості позиціонування CSS
3.1 'позиція'
3.1.2 Елемент <BODY>
3.2 "ліворуч", "зверху"
3.3 "ширина", "висота"
3.4 "кліп"
3.5 "переповнення"
3.6 "z-index"
3.7 "видимість"

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

Цей документ вводить два методи позиціонування елементів HTML, використовуючи нове властивість 'position': 1) 'відносне' позиціонування може бути зміщено відносно їхнього природного положення в потоці документа, і 2) 'абсолютне' позиціонування може бути розташоване довільно. Ці елементи встановлюють новий контекст для потоку міститься HTML-елементів, а також створюють систему координат для позиціонування дочірніх елементів. Наведені нижче приклади чітко демонструють ці особливості. Динамічні аспекти управління розташованими елементами, такими як приховування, відображення і переміщення, можуть бути виконані лише за допомогою зовнішньої мови сценаріїв.

Елементи позиціонування задаються за допомогою нового властивості "position". Розглянемо кожне з можливих значень властивості "позиції". Більшість наведених нижче прикладів використовують такий HTML:

<body>
<p> Початок вмісту тіла.
<span id = external> Початок зовнішнього вмісту.
<span id = internal> Внутрішній вміст. </span>
Кінець зовнішнього вмісту. </span>
Кінець вмісту тіла.
</p>
</body>

Кожен приклад буде визначати зовнішній і внутрішній по- різному.

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

Елементи з "абсолютним" позиціонуванням - це прямокутні ділянки, в які буде протікати вміст позиціонованого елемента. "Абсолютний" елемент і його батьківський елемент викладені незалежно, незалежно від розмірів або положення один одного. В цьому відношенні, розташування кожного "абсолютного" позиціонуваного елемента не залежить від інших. Вміст елемента з більш високим z-порядком може приховати вміст елемента з нижчим z-порядком. "Абсолютні" позиційні елементи нічого не знають один про одного. За замовчуванням позиціонований елемент буде розміщений трохи вище (у z-space) його батьківського.

Приклад 1

Розглянемо наступні визначення зовнішнього і внутрішнього :

#outer {position: absolute; зверху: 200px; ліворуч: 200px; колір: червоний;}
#inner {color: green;}

Це призводить до подібного:

(0,0) + ---------- вікно документа ---------- + (400,0) | Початок вмісту тіла. Кінець | Вміст тіла. | | | | | | | | | | + ----------------- + | | | Початок зовнішньої || | | зміст. Внутрішній || | | зміст. Кінець || | | зовнішній вміст. || | + ----------------- + | | | | | + ----------------------------------- + (400,400) (0, 400)

Позиція "Абсолют" має такі характеристики:

Вони визначають нову прямокутну площину, до якої перетікає їхній вміст, так само, як HTML всередині елемента <BODY> перетікає в контейнер за замовчуванням.
Вони розташовуються в системі координат свого батьківського елемента за допомогою властивостей "top" і "left".
Їх висоту і ширину можна вказати, використовуючи властивості "height" і "width". Якщо ширина не вказана, елемент поширюватиметься безпосередньо на правому зовнішньому краю батьківського елемента. Висота, якщо вона не вказана, буде достатньо великою для вмісту елемента.
Вони визначають нову систему координат для позиціонування дочірніх елементів. Ця система координат має початок у верхньому, лівому куті елемента.

Приклад 3

У <HEAD>: <STYLE TYPE = "text / css"> BODY {line-height: 200%} </STYLE>

#outer {position: relative; зверху: -12px; колір: червоний;}
#inner {position: relative; зверху: 12px; колір: зелений;}

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

+ ---------- вікно документа ---------- + | Початок | 1 | Початок змісту тіла. | | зовнішнього вмісту. | 2 | Внутрішній вміст. | | Кінець зовнішнього вмісту. | 3 | Кінець тіла | | 4 | зміст. | | | 5 | | | | 6 | | | | 7 | | | | | | + ----------------------------------- +

2.2.2 Розміщення 'абсолютні' позиціонують елементи відносно потоку

Використовуючи 'auto' для значення властивості 'top', 'абсолютний' позиціонований елемент може використовуватися для відображення смужок змін наступним чином:

Приклад 4

<SPAN STYLE = "position: relative; left: 10px;"> Я використовував дві червоні дефіси, щоб слугувати смужкою змін. Вони будуть "плавати" ліворуч від рядка, що містить наступну позицію <SPAN STYLE = "позиція: абсолютна; ліва: -10px; колір: червоний;"> - </SPAN> слово. </SPAN>

Це може призвести до:

2.3 Статичний Позиціонування

"Статичне" позиціонування ідентичне до звичайного візуалізації HTML. Ці елементи не можуть бути позиціоновані або переміщені, а також не визначають систему координат для дочірніх елементів. Це значення за замовчуванням для "position", за винятком Елемент <BODY> , яка, хоча вона не може бути позиціонована, визначає систему координат для дочірніх елементів.

Приклад 5

Порівняйте цей приклад з Приклад 2 . Єдина відмінність у CSS полягає в тому, що в цьому випадку зовнішній елемент є статичним, а не потоковим.

#outer {/ * position: static; * / колір: червоний;}
#inner {position: absolute; зверху: 200px; ліворуч: -100px; висота: 130px; ширина: 130px; колір: зелений;}

Оскільки статичний елемент не встановлює нову систему координат, внутрішній елемент розташований відносно елемента <BODY>:

(0,0) + ---------- вікно документа ---------- + (0,400) | Початок вмісту тіла. Початок | | зовнішнього вмісту. Кінець зовнішнього | | зміст. Кінець вмісту тіла. | | | | | | | | ------ + | | r | | | учасників. | | | | | | | | | ------ + | | | | | + ----------------------------------- + (400,400) (400,0)

2.4 Плавання елементи

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

Приклад 6

#outer {color: red;}
#inner {float: right; ширина: 130px; колір: зелений;}

(0,0) + ---------- вікно документа ---------- + (0,400) | Початок вмісту тіла. Початок | | зовнішнього вмісту. Кінець + ----------- + | | зовнішнього вмісту. | Внутрішній || Кінець змісту тіла. | зміст. || | + ----------- + | + ----------------------------------- +

2.5 Видимість

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

Приклад 7

<P> Виберіть підозрюваного: </P> <DIV ID = "container1" STYLE = "position: relative"> <IMG WIDTH = 100 HEIGHT = 100 SRC = "suspect1.jpg"> <P> Ім'я: Al Capone < / P> <P> Проживання: Чикаго </P> </DIV> <DIV ID = "container2" STYLE = "position: relative"> <IMG WIDTH = 100 HEIGHT = 100 SRC = "suspect2.jpg"> <P > Ім'я: Lucky Luciano </P> <P> Проживання: Нью-Йорк </P> </DIV> <FORM NAME = "myForm"> <INPUT TYPE = "кнопка" VALUE = "Capone" onClick = 'show (" hide ("container2") '> <INPUT TYPE = "кнопка" VALUE = "Luciano" onClick =' show ("container2"); приховати ("container1") '> </FORM>

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

Приклад 8

<BODY> <STYLE type = "text / css"> <! - # container1 {позиція: абсолютна; зверху: 2in; left: 2in;} # container2 {position: absolute; зверху: 2in; ліворуч: 2in; visibility: hidden;} -> </STYLE> <P> Виберіть підозрюваного: </P> <DIV ID = "container1"> <IMG WIDTH = 100 HEIGHT = 100 SRC = "suspect1.jpg"> <P> Ім'я: Аль Капоне </P> <P> Проживання: Чикаго </P> </DIV> <DIV ID = "контейнер2"> <IMG WIDTH = 100 HEIGHT = 100 SRC = "suspect2.jpg"> <P> Ім'я : Lucky Luciano </P> <P> Проживання: Нью-Йорк </P> </DIV> <ФОРМА NAME = "myform"> <INPUT TYPE = "кнопка" VALUE = "Capone" onClick = 'show ("container1") сховати ("container2") '> <INPUT TYPE = "кнопка" VALUE = "Luciano" onClick =' show ("container2"); приховати ("container1") '> </FORM>

У цьому прикладі "container2" має те ж саме походження, що і "container1", і займає ту ж саму область. Зауважте також, що властивість visibility була використана для вказівки, що 'container2' спочатку невидимий. Сценарій обробника подій кнопки 'Capone' може приховувати 'container1' і show 'container2'. Оскільки контейнери займають одне і те ж положення, і мають однаковий розмір, ефект полягає в тому, що одна змінює іншу.

2.6 Z-порядок

За замовчуванням z-упорядкування елементів у документі відбувається вперед у порядку, у якому вони відображаються в HTML. Таким чином, у прикладі 8 "container2" буде складений безпосередньо над "container1", оскільки він з'явився після "container1" у документі. Можна явно вказати z-порядок елементів, щодо інших контейнерів, через властивість 'z-index'. Наприклад:

Приклад 9

<STYLE type = "text / css"> <! - .pile {position: absolute; ліворуч: 2in; зверху: 2in; ширина: 3in; висота: 3in; } -> <IMG SRC = "butterfly.gif" CLASS = "купа" ID = "зображення" STYLE = "z-index: 1"> <DIV CLASS = "купа" ID = "text1" STYLE = "z- index: 3 "> Цей текст буде накладати зображення метелика. </DIV> <DIV CLASS = "pile" ID = "text2" STYLE = "z-index: 2"> Цей текст буде підкладений до тексту1, але накласти зображення метелика </DIV>

У цьому прикладі порядок елементів, перелічених у списку вперед, становить:

Приклад 9 також демонструє поняття прозорості. Поведінка елемента за замовчуванням дозволяє дозволити елементам, розташованим під ним, бути видимими через прозорі області у своєму вмісті HTML. У цьому прикладі кожен елемент прозоро перекриває елементи під ним. Таку поведінку можна перевизначити, використовуючи одне з існуючих властивостей, пов'язаних з фоном, наприклад "background".

Цей розділ використовує те ж саме позначення значень властивостей як специфікація CSS1 для опису нових властивостей CSS.