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

  1. WD-позиціонування-970131
  2. Статус цього документа
  3. 2.1 "Абсолютне" позиціонування
  4. Приклад 1
  5. 2.2 "Відносне" позиціонування
  6. Приклад 2
  7. 2.2.1 Переміщення відносно розташовані елементи
  8. Приклад 3
  9. 2.2.2 Розміщення 'абсолютні' позиціонують елементи відносно потоку
  10. Приклад 4
  11. 2.3 Статичний Позиціонування
  12. Приклад 5
  13. 2.4 Плавання елементи
  14. Приклад 6
  15. 2.5 Видимість
  16. Приклад 7
  17. Приклад 8
  18. 2.6 Z-порядок
  19. Приклад 9
  20. 3.1 'позиція'
  21. 3.1.2 <BODY> Елемент
  22. 3.2 "ліворуч", "зверху"
  23. 3.3 "ширина", "висота"
  24. 3.4 "кліп"
  25. 3.5 "переповнення"
  26. 3.6 "z-index"
  27. 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". Якщо ширина не вказана, елемент поширюватиметься безпосередньо на правому зовнішньому краю батьківського елемента. Висота, якщо вона не вказана, буде достатньо великою для вмісту елемента.
  • Вони визначають нову систему координат для позиціонування дочірніх елементів. Ця система координат має початок у верхньому, лівому куті елемента.

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

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

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

Приклад 2

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

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

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

2.2.1 Переміщення відносно розташовані елементи

Коли властивості "top" та / або "left" використовуються разом з "відносним" позиціонуваним елементом, вміст зміщується відносно його початкової позиції, а не розташовується відносно батьківської системи координат, як у "абсолютних" позиціонуваних елементів . Елемент зберігає свою оригінальну, "течучу" форму. Таким чином, будь-які розриви рядків будуть збережені, коли переміщується 'relativno' позиціонований елемент. Динамічне переміщення позицій «відносно» позицій може забезпечити анімаційні ефекти в середовищах сценаріїв. Статичне позиціонування можна використовувати як загальну форму супер- та індексації, хоча висота рядка не буде автоматично налаштована для врахування позиціонування. Розглянемо наступний приклад:

Приклад 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.

3.1 'позиція'

Значення: абсолютний | відносний | статичний
Початковий: статичний
Застосовується до: всі елементи
Успадковане: немає
Значення відсотків: N / A

Кожне різноманіття "позиції" встановлює одне або декілька з наступних:

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

'Відносна' Розташовані елементи мають своє походження, розташоване у верхній, лівій частині першої візуалізованої лінії вмісту елемента. Наступні рядки 'relative'ly розташованого елемента можуть поширюватися ліворуч від початку (наприклад, коли вміст елемента починається посередині рядка).

3.1.2 <BODY> Елемент

Елемент <BODY> визначає спеціальний неявний контейнер, що має такі властивості:

3.2 "ліворуч", "зверху"

Значення: <довжина> | <відсоток> | авто
Початкове значення: авто
Застосовується до: елементів з властивістю 'position' типу 'absolute' або 'relative'.
Успадковане: немає
Значення відсотків: відносяться до ширини та висоти батьківського елемента. Якщо для батька встановлено значення "auto", відсоток не визначено.

Для елементів з «абсолютним» позиціонуванням, «лівий» і «верхній» відносяться до походження найближчого елемента з «положенням» значення «абсолютний» або «відносний».

Для елементів з "відносним" позиціонуванням:

Значення за замовчуванням ("auto") - це нормальне положення елемента в потоці. Це значення обчислюється UA для позиціонованих елементів і дорівнює 0 (без зміщення) для "відносних" позиціонуваних елементів.

3.3 "ширина", "висота"

Значення: <довжина> | <відсоток> | авто
Початкове значення: авто
Застосовується до: блокового рівня і замінених елементів, елементів з властивістю 'position' типу 'absolute' \ t
Успадковане: немає
Значення відсотків: відносяться до ширини та висоти батьківського елемента. Якщо висота батька є "auto", відсоток висоти не визначено.

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

Для "абсолютних" позиціонуваних елементів:

3.4 "кліп"

Значення: <форма>> авто
<shape>: rect (<top> <right> <стрілка> <ліва>)
<top> <right> <bottom> <лівий>: auto | <довжина>
Початкове значення: авто
Застосовується до: елементів з властивістю 'position' типу 'absolute'.
Успадковане: немає
Значення відсотків: N / A

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

Координати відносяться до походження елемента. Дозволені негативні координати. При перетворенні в піксельні координати нижній правий кут виключається з прямокутника відсікання. Це правило необхідно для визначення прямокутників нульової або нульової висоти.

Будь-яку координату можна замінити значенням "auto", що призводить до того, що прямокутник відсікання відповідає мірі елемента в заданому напрямку, включаючи відступи, межі та дочірні елементи. Значення за замовчуванням для властивості "clip" призводить до того, що прямокутник кліпу охоплює весь елемент.

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

Примітка: Якщо область відсікання перевищує межі вікна документа UA, вміст може бути обрізано до цього вікна за допомогою стандартного робочого середовища.

3.5 "переповнення"

Значення: немає | кліп | прокручування
Початкове значення: немає
Застосовується до: елементів з властивістю 'position' типу 'absolute' або 'relative'.
Успадковане: немає
Значення відсотків: N / A

"Переповнення" визначає, що відбувається, коли вміст елемента перевищує його висоту або ширину. Значення 'none' означає, що відсікання не повинно виконуватися. Наприклад, попередньо відформатований текст, що проходить повз правого краю меж елемента, буде виводитися в будь-якому випадку. Значення "кліпу" вказує, що відсікання має виконуватися без механізму прокручування. Поведінка значення 'scroll' залежить від UA, але повинна викликати виклик механізму прокручування.

Примітка: Навіть якщо для параметра "overflow" встановлено значення "none", вміст може бути обрізано у вікні документа UA в рідному операційному середовищі.

3.6 "z-index"

Значення: auto | <integer>
Початкове значення: авто
Застосовується до: елементів з властивістю 'position' типу 'absolute' або 'relative'.
Успадковане: немає
Значення відсотків: N / A

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

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

3.7 "видимість"

Значення: успадковувати | видимий | приховано
Початковий: успадковувати
Застосовується до: всі елементи
Успадковане: якщо значення "наслідувати"

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

Роберт Стівен
IRC (Internet Relay Chat)