По умолчанию Visual Studio настроена на компоновку элементов вашей страницы при помощи упорядочения потоком. То есть при перетаскивании элементов из панели инструментов в визуальный конструктор они будут размещаться относительно друг друга. Если вы используете для компоновки вашей страницы сетку или CSS-позиционирование, тогда это вам подходит. На рис. 14.26 показана страница с упорядочением потоком (использующая сетку).
Вы можете встретить такую ситуацию, когда вам понадобится абсолютное позиционирование элемента на странице с упорядочением потоком. Предположим, что на рис. 14.26 мы
хотели встроить логотип нашей компании на правой стороне страницы. Мы могли бы попробовать вставить его в сетку, но скорее всего из этого ничего не получилось бы, поскольку элементы быстро теряют выравнивание. Вместо этого мы можем выделить изображение и в меню Format выбрать пункт Position. После этого появится диалоговое окно Position (рис. 14.27).
Рис. 14.27. Настройка абсолютного позиционирования для элемента на странице с упорядочением потоком
Диалоговое окно Position позволяет вам указать позиционирование на странице для выделенного элемента. Вы видите, что это аналогично позиционированию графики в документе Word. Вы выбираете стиль переноса и стиль позиционирования (в данном случае это Absolute). Не беспокойтесь об указании информации о местоположении. Вы можете изменить ее простым перетаскиванием элемента.
На рис. 14.28 показано перетаскивание этого же элемента по странице. Обратите внимание, что интегрированная среда показывает вам вертикальные и горизонтальные центры в виде линий в визуальном конструкторе. Это помогает вам выравнивать элемент. Если вы выравниваете кнопку или текстовое поле, то интегрированная среда будет показывать вам также индикаторы полей и расстояний.
Если вы собираетесь использовать абсолютное позиционирование для всей страницы, то вам наверняка не захочется вручную выделять каждый элемент и задавать для него Position в меню Format. Это было бы действительно утомительно. Вместо этого вы можете настроить опцию, которая подскажет Visual Studio, как по умолчанию добавлять элементы управления на страницу. Вы настраиваете это в диалоговом окне Options (Tools | Options).
Здесь вы переходите в узел HTML Designer | CSS Styling. На рис. 14.29 показан пример. Вы видите выделенный флажок выбора. Выбор этого флажка означает, что с этого момента все элементы управления должны добавляться на страницу при помощи абсолютного позиционирования.
Когда вы выполняете компоновку страницы при помощи абсолютного позиционирования, то все элементы должны быть помещены на свои точные места. Поэтому вы должны позаботиться о полях и расстояниях. Например, на рис. 14.30 показано начало создания страницы с абсолютным позиционированием. Здесь кнопка Cancel размещена справа от Save и ниже текстового поля First Name. Вы видите индикаторы полей. Однако если необходимо будет добавить дополнительные элементы между текстовым полем и кнопками, то придется перемещать каждую кнопку. При упорядочении потоком элементы просто сместились бы (или вы вставили бы в таблицу новую строку).
Когда элемент на странице позиционирован абсолютно, то визуальный конструктор просто меняет "за кулисами" стиль элемента. То есть он настраивает подробности позиционирования для каждого элемента при помощи стилевого тега. Например, следующий код показывает разметку для одного из текстовых полей рис. 14.30:
<asp:TextBox ID="TextBoxl" runat="server" CssClass="inputBox"
style="z-index: 1; left: 275px; top: 91px; position: absolute">
</asp:TextBox>
Здесь вы видите, что атрибут position устанавливается в значение absolute, задается также положение слева и сверху. По этой причине порядок следования элементов в коде разметки страниц с абсолютным позиционированием не совпадает с их порядком на экране. Они размещаются в коде разметки в том порядке, в каком они добавляются на страницу.
Обратите также внимание на то, что в коде указано нечто под названием z- index. Это позволяет вам делать в вашем выводе слои. Каждый элемент находится в слое (в данном случае в слое 1). Слои могут перекрывать друг друга.
Примечание
Набор функциональных возможностей абсолютного позиционирования в Visual Studio 2008 отличается от того, который был в версии 2005. Например, в версии 2008 вы больше не сможете выделить несколько элементов в визуальном конструкторе Web- форм, чтобы работать с ними как с одной группой. Кроме того, нет больше опций меню Format для того, чтобы сделать размер нескольких элементов одинаковым, или для выравнивания их друг с другом. Кроме того, не все элементы при перетаскивании из панели инструментов автоматически реализуют абсолютное позиционирование. В то время как текстовые поля и кнопки делают это, метки и флажки выбора — нет. Для этих элементов вы должны вручную установить абсолютное позиционирование, а уже после этого вы сможете работать с ними в визуальном конструкторе.
Мы подозреваем, что причин такого уменьшения поддержки абсолютного позиционирования может быть несколько. Первая причина состоит в том, что фирма Microsoft переписала ббльшую часть движка позиционирования (для повышения его совместимости с CSS). Вторая состоит в том, что абсолютное позиционирование несколько вышло из моды. Ббльшая часть новых сайтов создается при помощи упорядочения потоком (с сетками) или при помощи CSS-позиционирования.