По умолчанию 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-позиционирования.