Связь и интернет Архив Программирование
   
Сделать стартовойСделать закладку            
   ПОИСК  
   
Главная / CSS / Не для новичков /
8  Perl
8  PHP
8  JavaScript
8  HTML
8  DHTML
8  XML
8  CSS
8  C / C++
8  Pascal и Delphi
8  Турбо Ассемблер
8  MySQL
8  CASE-технологии
8  Алгоритмы
8  Python
8  Обратная связь
8  Гостевая книга
Новости о мире


Позиционирование элементов - Программирование от RIN.RU
Позиционирование элементов


Общие положения


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


В процессе отображения документа для каждого элемента обозреватель генерирует нуль или более объемлющих прямоугольников. Внешний вид и расположение этих прямоугольников определяется следующими параметрами:


  • размерами прямоугольника, которые задаются свойствами границы, заполнителя и рамки;

  • типом прямоугольника, который задается свойством display;

  • схемой позиционирования элемента, которая задается свойством position;

  • взаимоотношениями элементов в дереве документа;

  • внешней информацией (например, размером окна отображения, собственными размерами графических образов и т. п.).


Далее мы рассмотрим, как именно происходит генерация объемлющих прямоугольников в зависимости от перечисленных параметров.


Типы объемлющих прямоугольников: свойство display


Синтаксис:display: inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
Начально:inline
Применимо:ко всем элементам
Наследуемо:нет
Проценты:не используются
Устройства:все

Поддержка :Поддерживает только inline, block, list-item, none (4.0+),table-header-group и table-footer-group (5.0+)
Поддерживает только inline, block, list-item и none (4.0+)


Свойство display задает тип объемлющего прямоугольника для данного элемента. CSS поддерживает следующие типы прямоугольников:


blockБлочный элемент. Соответствует блочным элементам HTML, т. е. отображается как отдельный абзац. При его отображении генерируется главный прямоугольник блока, в котором располагаются объемлющие прямоугольники потомков данного элемента.
inlineТекстовый элемент. Соответствует текстовым элементам HTML, т. е. отображается как текстовые строки внутри текущего абзаца, точнее внутри главного прямоугольника соответствующего блока.
list-itemЭлемент списка. Отображается как блочный элемент с добавлением к нему маркера элемента списка (подробнее см. этот пункт).
markerМаркер. Подробности см. в этом пункте .
run-inПрисоединяемый элемент. Если следующий за данным элемент является блочным, то данный элемент форматируется как его первый текстовый элемент. В противном случае отображается как обычный блочный элемент.
compactКомпактный элемент. Если следующий за данным элемент является блочным, то данный элемент форматируется как однострочный текстовый элемент, и если он помещается на левой или правой границе последующего блока (граница задается свойством direction вмещающего блока), то на ней он и отображается. В противном случае отображается как обычный блочный элемент.
noneЭлемент и все его потомки игнорируются при отображении.
tableБлочная таблица. Подробности см. в этом пункте.
inline-tableТекстовая таблица. Подробности см. в этом пункте.
table-row-groupГруппа строк таблицы. Подробности см. в этом пункте.
table-header-groupГруппа надзаголовков таблицы. Подробности см. в этом пункте.
table-footer-groupГруппа подзаголовков таблицы. Подробности см. в этом пункте.
table-rowСтрока таблицы. Подробности см. в этом пункте.
table-column-groupГруппа столбцов таблицы. Подробности см. в этом пункте.
table-columnСтолбец таблицы. Подробности см. в этом пункте.
table-cellЯчейка таблицы. Подробности см. в этом пункте.
table-captionЗаголовок таблицы. Подробности см. в этом пункте.



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


P { display: block } /* Блочный элемент */
EM { display: inline } /* Текстовый элемент */
LI { display: list-item } /* Элемент списка */
IMG { display: none } /* Не отображать графические образы */


Схема позиционирования: свойство position


Синтаксис:position: static | relative | absolute | fixed | inherit
Начально:static
Применимо:ко всем элементам, кроме генерируемого оглавления
Наследуемо:нет
Проценты:не используются
Устройства:визуальные

Поддержка :Поддерживает только static, relative и absolute (4.0+)
Поддерживает только relative и absolute; реализовано с ошибками (4.0+)


Свойство position задает схему позиционирования данного элемента. CSS поддерживает следующие схемы позиционирования:


staticСтатический элемент. Не имеет специального позиционирования, отображается в обычном потоке элементов.
relativeОтносительно позиционируемый элемент. Для него сначала генерируется объемлющий прямоугольник в обычном потоке элементов, а затем смещается на величины, заданные свойствами left и top.
absoluteАбсолютно позиционируемый элемент. Позиция элемента вычисляется относительно позиции его ближайшего позиционированного предка (или относительно элемента BODY, если все предки не позиционированы) на основании свойств left и top. Помимо позиции элемента можно задать и его размер свойствами right и bottom.
fixedФиксированный элемент. Этот элемент является абсолютно позиционированным, но дополнительно зафиксирован относительно некой отправной точки. Для непрерывных устройств отображения его позиция зафиксирована относительно окна обозревателя, т. е. он остается неподвижным при прокрутке окна. Для страничных устройств его позиция фиксируется относительно страницы.


Абсолютно позиционированные элементы выпадают из обычного потока отображения элементов документа. Их позиция не зависит от окружающих объектов, а определяется относительно ближайшего позиционированного предка. Если заданная позиция уже занята другим элементом, то оба элемента будут отображаться в одном месте, перекрывая друг друга. То, какой из элементов находится выше, а какой ниже, задается свойством z-index. Абсолютно позиционированные элементы не имеют границ, но имеют заполнители и рамки. Пример абсолютно позиционированного графического образа внутри относительно позиционированного элемента DIV:


<DIV style="position: relative; left: 0; top: 0; height: 50px">
<P>Часть текста будет скрыта рисунком, потому что он позиционирован поверх текста.</P>
<IMG src="pict\5_leaf.gif" style="position: absolute; left: 300px; top: 0">
</DIV>


Часть текста будет скрыта рисунком, потому что он позиционирован поверх текста.




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


<P>Пример вывода текста в верхнем индексе:
<SPAN style="position: relative; top: -3px">xyz</SPAN>.</P>


Этот пример будет отображаться так:


Пример вывода текста в верхнем индексе: xyz.


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


Вперед  >>>
 1  2  3  4 


 8  Комментарии к статье  8 8  Обсудить в чате

8  В тему

Введение в таблицы стилей

Селекторы, псевдоклассы и псевдоэлементы

Значения свойств, каскадность и наследование

Границы, заполнители и рамки

Визуализация элементов

Цвет и фон

Шрифты

Текст

Таблицы

Генерация содержимого, нумерация и списки

Страничные устройства вывода

Звуковые таблицы стилей

 
  
  
    Copyright ©  RIN 2003 - 2004      * Обратная связь