Расположение элементов 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 <ТЕЛО> Элемент
  22. 3.2 «слева», «сверху»
  23. 3.3 «ширина», «высота»
  24. 3.4 «клип»
  25. 3.5 «переполнение»
  26. 3.6 'z-index'
  27. 3.7 «видимость»

WD-позиционирование-970131


W3C Рабочий проект 31 января 1997 г.

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

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

Этот документ представляет собой промежуточный проект, подготовленный Редакционной комиссией W3C по редактированию HTML в рамках Таблица стилей ; он достаточно стабилен, чтобы быть выпущенным для общественного обсуждения [email protected] ), но может измениться до утверждения как (часть) рекомендации. Следовательно, он не должен быть реализован как часть производственной системы, но может быть реализован на экспериментальной основе.

Это рабочий проект W3C для рассмотрения членами W3C и другими заинтересованными сторонами. Это предварительный документ, который может быть обновлен, заменен или заменен другими документами в любое время. Неуместно использовать рабочие проекты W3C в качестве справочного материала или ссылаться на них как на «незавершенное производство». Список текущих технических отчетов W3C можно найти по адресу http://www.w3.org/pub/WWW/TR , Поскольку рабочие черновики подвержены частым изменениям, рекомендуется ссылаться на последний URL, а не на URL для этого рабочего черновика.

Язык разметки гипертекста (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'. Давайте рассмотрим каждое из возможных значений свойства 'position'. В большинстве приведенных ниже примеров используется следующий HTML:

<Тело>
<p> Начало содержимого тела.
<span id = external> Начало внешнего содержимого.
<span id = inner> Внутреннее содержимое. </ span>
Конец внешнего содержимого. </ Span>
Конец содержимого тела.
</ Р>
</ Body>

Каждый пример будет определять внешнее и внутреннее по- разному.

2,1 «Абсолютное» позиционирование

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

Пример 1

Рассмотрим следующие определения внешнего и внутреннего :

#outer {position: absolute; верх: 200 пикселей; слева: 200 пикселей; красный цвет;}
#inner {color: green;}

Это приводит к чему-то вроде следующего:

(0,0) + ---------- Окно документа ---------- + (400,0) | Начало содержимого тела. Конец | | содержание тела. | | | | | | | | | | + ----------------- + | | | Начало внешнего || | | содержание. Внутренний || | | содержание. Конец || | | внешнее содержание. || | + ----------------- + | | | | | + ----------------------------------- + (400 400) (0, 400)

«Абсолют» позиционируется, имеет следующие характеристики:

  • Они определяют новую прямоугольную плоскость, в которую передается их содержимое, так же, как HTML-код внутри элемента <BODY> перетекает в контейнер по умолчанию.
  • Они размещаются в системе координат родительского элемента с помощью свойств top и left.
  • Их высота и ширина могут быть указаны с помощью свойств 'height' и 'width'. Если ширина не указана, элемент будет простираться непосредственно внутри правого внешнего края родительского элемента. Высота, если она не указана, будет достаточно большой для содержимого элемента.
  • Они определяют новую систему координат для позиционирования дочерних элементов. Эта система координат имеет свое начало в верхнем левом углу элемента.

2,2 «Относительное» позиционирование

«Относительное» позиционирование содержимого передается в родительский элемент, как и любой другой HTML. Этот тип позиционирования позволяет элементу сохранять свое «естественное» форматирование, поддерживая функции, подобные «абсолютным» позиционированным элементам, такие как:

Подобно «абсолютным» позиционированным элементам, «относительное» позиционирование определяет новую систему координат для дочерних элементов, причем начало координат находится в позиции, где отображается первый дочерний элемент. Рассмотрим следующий пример:

Пример 2

#outer {position: относительный; красный цвет;}
#inner {position: absolute; верх: 200 пикселей; слева: -100px; высота: 130 пикселей; ширина: 130 пикселей; цвет: зеленый;}

Это приводит к чему-то вроде следующего:

(0,0) + ---------- Окно документа ---------- + (0,400) | Начало содержимого тела. Начало | | внешнего содержания. Конец внешнего | | содержание. Конец содержимого тела. | | | | | | | | + ---------- + | | | Внутренний | | | | содержание. | | | | | | | | | | | + ---------- + | | | | | + ----------------------------------- + (400 400) (400,0)

2.2.1 Перемещение относительно позиционированные элементы

Когда свойства «top» и / или «left» используются в сочетании с «относительным» позиционированным элементом, содержимое смещается относительно его исходной позиции, а не позиционируется относительно родительской системы координат, как с «абсолютными» позиционированными элементами , Элемент сохраняет свою первоначальную «обтекаемую» форму. Таким образом, любые переносы строк будут сохраняться при перемещении «относительно» расположенного элемента. Динамическое перемещение «относительно» расположенных элементов может обеспечить анимационные эффекты в сценариях. Статическое позиционирование может использоваться в качестве общей формы супер- и абонентской подписки, хотя высота линии не будет автоматически корректироваться с учетом позиционирования. Рассмотрим следующий пример:

Пример 3

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

#outer {position: относительный; верх: -12px; красный цвет;}
#inner {position: относительный; верх: 12 пикселей; цвет: зеленый;}

Это приводит к тому, что внешний текст является надстрочным, а внутренний текст - по отношению к внешнему тексту (но даже с обычным основным текстом). На иллюстрации ниже цифры слева от иллюстрации указывают на нормальное положение линий с двойным интервалом.

+ ---------- Окно документа ---------- + | Начало | 1 | Начало содержимого тела. | | внешнего содержания. | 2 | Внутреннее содержание. | | Конец внешнего содержимого. | 3 | Конец тела | | | 4 | содержание. | | | 5 | | | | 6 | | | | 7 | | | | | | + ----------------------------------- +

2.2.2 Размещение «абсолютные» позиционированные элементы относительно потока

Используя 'auto' для значения свойства 'top', позиционируемый элемент 'absolute' может быть использован для отображения полос изменения следующим образом:

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

Это может привести к чему-то вроде:

+ ---------- Окно документа ---------- + | Я использовал два красных дефиса, чтобы служить | | как бар изменений. Они будут | | «плавать» слева от линии | | - содержащий следующее слово. | | | | | | | | | + ----------------------------------- +

2.3 Статический позиционирование

«Статическое» позиционирование идентично обычно отображаемому HTML. Эти элементы нельзя позиционировать или перемещать, а также они не определяют систему координат для дочерних элементов. Это значение по умолчанию для позиции, за исключением Элемент <BODY> , который, хотя он и не может быть позиционирован, определяет систему координат для дочерних элементов.

Пример 5

Сравните этот пример с Пример 2 , Единственное отличие в CSS состоит в том, что в этом случае внешний элемент является статическим, а не встроенным.

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

Поскольку статический элемент не устанавливает новую систему координат, внутренний элемент позиционируется относительно элемента <BODY>:

(0,0) + ---------- Окно документа ---------- + (0,400) | Начало содержимого тела. Начало | | внешнего содержания. Конец внешнего | | содержание. Конец содержимого тела. | | | | | | | | ------ + | | г | | | энтов. | | | | | | | | | ------ + | | | | | + ----------------------------------- + (400 400) (400,0)

2.4 Плавающий элементы

Плавающие «элементы» уже могут быть созданы с использованием CSS1, как показано в следующем примере. Мы ожидаем будущих расширений плавать: свойство, чтобы обеспечить большую гибкость в обтекании текста вокруг элементов.

Пример 6

#outer {color: red;}
#inner {float: right; ширина: 130 пикселей; цвет: зеленый;}

(0,0) + ---------- Окно документа ---------- + (0,400) | Начало содержимого тела. Начало | | внешнего содержания. Конец + ----------- + | | внешнего содержания. | Внутренний || | Конец содержимого тела. | содержание. || | + ----------- + | + ----------------------------------- +

2.5 Видимость

Свойство visibility определяет, будет ли элемент отображаться изначально. В среде сценариев это свойство может быть динамически изменено, чтобы скрыть или показать элемент. В отличие от ' дисплей: нет ', элементы, которые не видны, все еще занимают место - они просто отображаются прозрачно. Пример:

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

Нажатие любой кнопки формы вызывает пользовательскую функцию сценария, которая делает соответствующий элемент видимым, а другой элемент скрытым. Поскольку расположение элементов является «относительным», они не влияют на макет документа. HTML-код, содержащийся в каждом элементе, выложен внутри потока включающего блока, как обычно. Более визуально привлекательная версия вышеупомянутого может быть разработана с использованием перекрывающихся «абсолютных» позиционированных элементов:

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

В этом примере «container2» имеет то же происхождение, что и «container1», и занимает ту же область. Также обратите внимание, что свойство видимости использовалось, чтобы указать, что «container2» изначально невидим. Скриптовый обработчик события кнопки «Capone» может скрывать «container1» и показывать «container2». Поскольку контейнеры занимают одинаковую позицию и имеют одинаковый размер, эффект заключается в замене одного другим.

2.6 Z-порядок

По умолчанию z-упорядочение элементов в документе происходит в обратном порядке в том порядке, в котором они отображаются в HTML. Следовательно, в примере 8 «container2» будет помещен непосредственно над «container1», поскольку он появился после «container1» в документе. Можно явно указать z-порядок элемента относительно других контейнеров через свойство z-index. Например:

Пример 9
<STYLE type = "text / css"> <! - .pile {position: absolute; слева: 2 дюйма; верх: 2 дюйма; ширина: 3 дюйма; высота: 3 дюйма; } -> <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"> Этот текст будет лежать в основе text1, но перекрывать изображение бабочки </ DIV>

В этом примере порядок элементов, перечисленных задом наперед:

Пример 9 также демонстрирует понятие прозрачности. Поведение элемента по умолчанию - позволить элементам, находящимся под ним, быть видимыми через прозрачные области в его HTML-контенте. В этом примере каждый элемент прозрачно перекрывает элементы под ним. Это поведение можно переопределить, используя одно из существующих свойств, связанных с фоном, например, background.

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

3.1 «позиция»

Значение: абсолютное | родственник | статический
Начальный: статический
Относится к: всем элементам
Наследуется: нет
Значения в процентах: N / A

Каждая разновидность «положения» устанавливает одно или несколько из следующего:

«Абсолют» Расположенные элементы выходят за пределы Модель форматирования CSS1 , «Абсолютные» позиции не являются ни блочными, ни элементами списка, ни плавающими, ни встроенными элементами. Вместо этого элементы, расположенные с типом 'absolute', форматируются независимо от всех других элементов в прямоугольном контейнере.

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

3.1.2 <ТЕЛО> Элемент

Элемент <BODY> определяет специальный неявный контейнер, имеющий следующие свойства:

3.2 «слева», «сверху»

Значение: <длина> | <процент> | авто
По умолчанию: авто
Применяется к: элементам со свойством position типа «absolute» или «родственник».
Наследуется: нет
Значения в процентах: обратитесь к ширине и высоте родительского элемента. Если высота родительского элемента установлена ​​на «авто», процент не определен.

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

Для элементов с «относительным» позиционированием:

Значение по умолчанию ('auto') - это нормальная позиция элемента в потоке. Это значение рассчитывается UA для позиционированных элементов и равно 0 (без смещения) для «относительных» позиционированных элементов.

3.3 «ширина», «высота»

Значение: <длина> | <процент> | авто
По умолчанию: авто
Применяется к: блочным и заменяемым элементам, элементам со свойством 'position' типа 'absolute'
Наследуется: нет
Значения в процентах: обратитесь к ширине и высоте родительского элемента. Если высота родительского элемента 'auto', процент высоты не определен.

Для элементов с «позицией» типа «относительный» и «статический» поведение « ширина ' а также ' рост "не отличается от того, что определено Модель форматирования CSS1 ,

Для «абсолютных» позиционированных элементов:

3.4 «клип»

Значение: <shape> | авто
<shape>: rect (<top> <right> <bottom> <left>)
<top> <right> <bottom> <left>: auto | <Длина>
По умолчанию: авто
Применяется к: элементам со свойством position позиции типа absolute.
Наследуется: нет
Значения в процентах: N / A

Отсечение изменяет отображение HTML, но не влияет на его структуру. Область отсечения определяет ту часть элемента, которая является видимой. Он вычисляется по пересечению области клипа родителя со значением свойств «clip» и «overflow» элемента. Любая часть элемента, которая находится за пределами его области отсечения, включая ее границы и отступы, является прозрачной.

Координаты указаны относительно происхождения элемента. Отрицательные координаты разрешены. При преобразовании в пиксельные координаты нижний правый угол исключается из прямоугольника отсечения. Это правило необходимо для разрешения определения прямоугольников нулевой ширины или нулевой высоты.

Любая координата может быть заменена значением 'auto', которое заставляет прямоугольник отсечения соответствовать экстенту элемента в заданном направлении, включая отступы, границы и дочерние элементы. Значение по умолчанию для свойства 'clip' заставляет прямоугольник клипа покрывать весь элемент.

На данный момент все области отсечения являются прямоугольными. Мы ожидаем будущих расширений, чтобы разрешить непрямоугольное отсечение.

Примечание. Если область отсечения превышает границы окна документа UA, содержимое может быть обрезано до этого окна собственной операционной средой.

3.5 «переполнение»

Значение: нет | клип | свиток
Начальный: нет
Применяется к: элементам со свойством position типа «absolute» или «родственник».
Наследуется: нет
Значения в процентах: N / A

«Переполнение» определяет, что происходит, когда содержимое элемента превышает его высоту или ширину. Значение «none» указывает, что отсечение не должно выполняться. Например, предварительно отформатированный текст, который выходит за правый край границ элемента, будет отображаться в любом случае. Значение «clip» указывает, что отсечение должно выполняться без механизма прокрутки. Поведение значения scroll зависит от UA, но должно вызывать запуск механизма прокрутки.

Примечание. Даже если для параметра «overflow» установлено значение «none», содержимое может быть обрезано до окна документа UA в собственной операционной среде.

3.6 'z-index'

Значение: авто | <Целое число>
По умолчанию: авто
Применяется к: элементам со свойством position типа «absolute» или «родственник».
Наследуется: нет
Значения в процентах: N / A

Свойство z-index используется для указания порядка размещения элементов, переопределяя поведение по умолчанию, которое заключается в том, чтобы размещать их снизу вверх в порядке их появления в исходном коде HTML. Свойство 'z-index' позволяет задавать z-порядок элемента в виде целого числа, которое определяет порядок размещения относительно родственных и родительских элементов:

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

3.7 «видимость»

Значение: наследовать | видимый | скрытый
Начальный: наследовать
Относится к: всем элементам
Наследуется: если значением является «унаследовать»

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

Роберт Стеван