Размещение элементов в режиме конструктора

Статья
11/05/2008

Обновлен: Ноябрь 2007

При создании HTML-страниц или веб-страниц ASP.NET в конструкторе HTML элементы физически располагаются сверху вниз. По умолчанию при отображении страницы в обозревателе элементы также отображаются в порядке сверху вниз. Это иногда называется макет потока.

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

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

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

Последовательное размещение

Если элементы не имеют свойств стиля позиционирования, они располагаются на странице сверху вниз и слева направо или справа налево, в зависимости от настройки атрибута dir страницы или элемента-контейнера для элемента или языковой настройки обозревателя. Отображать документы HTML, которые используют этот макет, может любой веб-обозреватель. Иногда положение элементов изменяется при изменении размера страницы.

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

Размещение по двум направлениям

Можно применить параметры размещения для отдельных элементов, что позволяет точно размещать элементы на странице.

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

Средство веб-разработки Microsoft Visual Web Developer позволяет указать параметры размещения, которые соответствуют определенным в спецификации W3C для каскадных таблиц стилей. Параметры размещения допустимы в любых обозревателях, которые реализуют стандарт W3C HTML 4.0, в том числе, поддерживающих XHTML 1.1.

Параметр может принимать следующие значения:

absolute

Элемент отображается на странице в положении, определяемом любой комбинацией свойств стиля left, right, top и bottom. Положение 0,0 определяется в зависимости от родителя текущего элемента. Родительским является первый элемент-контейнер, имеющий данные размещения. Например, если текущий элемент находится внутри элемента div с данными размещения, абсолютное положение рассчитываются на основе положения элемента div. Если текущий элемент не имеет элемента-контейнера с указанием размещения, данные размещения рассчитывается на основе элемента body.

relative

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

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

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

static

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

Visual Web Developer также предлагает параметр позиционирования Not Set, позволяющий удалить все существующие данные размещения из отдельного элемента управления или элементов управления, которые могут быть добавлены в будущем.

Размещение надписей или групп элементов

Чтобы получить возможность создания плавающей надписи или группы элементов как одного целого, можно добавить слой на страницу. Слой является элементом div с данными размещения, позволяющим перетаскивать его по странице. Можно затем ввести текст или перетащить элементы в элемент div. В меню Visual Web Developer имеется команда Формат для добавления слоя, или можно самостоятельно создать элемент div и добавить сведения о его размещении вручную.

Ограничение положения в сетке

Если используется абсолютное или относительное размещение, а также используются точки в качестве основы для позиционирования (т.е. единицами измерения для свойств left и top являются точки), можно установить параметр, чтобы привязать элементы к невидимой сетке. Это позволяет выровнять элементы на странице. Дополнительные сведения см. в разделе "Параметры", "Конструктор HTML", диалоговое окно "Позиционирование CSS".

Иерархическое представление элементов

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

Элементы с абсолютным или относительным размещением могут включать свойство z-index, указывающее порядок, с заднего плана к переднему, элемента в третьем измерении. Если два элемента занимают одно и то же пространство, элемент с более высоким значением атрибута z-индекса отображается сверху. При использовании команд в режиме конструктора для задания размещения свойство z-index устанавливается автоматически, начиная со 100 для самого нижнего элемента. При добавлении свойств размещения в режиме исходного кода необходимо добавить свойство z-index вручную.