Абсолютное позиционирование

Для позиционирования элемента управления на странице необходимо использовать все обычные приемы HTML-дизайна, такие как абзацы, разрывы строк, таблицы и стили. По умолчанию Visual Studio предполагает, что элементы должны размещаться с использованием гибкого режима потокового (flow) позиционирования, который позволяет содержимому увеличиваться и уменьшаться динамически без возникновения проблем с компоновкой.

Однако у разработчика также есть возможность применить и режим абсолютного (absolute) позиционирования с помощью стандарта CSS. Все, что от него требуется — это добавить для своего элемента управления внутристрочный CSS-стиль с параметрами абсолютного позиционирования. Например, ниже показан CSS-стиль, указывающий, что кнопка должна размещаться в точности в 100 пикселях от левого края и 50 пикселях от верхнего края страницы:

<asp:Button id="cmd" style="position: absolute; left: l00px; top: 50px;" runat="server" ... />

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

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

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

Например, вы могли бы применять режим абсолютного позиционирования для закрепления строки меню в какой-то определенной стороне окна, а для списка ссылок внутри нее — режим обычной потоковой компоновки. Для такого случая прекрасно подходит контейнер <div>, поскольку он не имеет никаких встроенных параметров внешнего вида (хотя с помощью правил стилей для него все-таки может устанавливаться цвет переднего плана, цвет фона и т.д.).

Контейнер <div>, по сути, представляет собой "плавающее" поле. В приведенном ниже примере, он имеет фиксированную ширину, которая составляет 200 пикселей, и нефиксированную высоту, которая будет изменяться в соответствии с размером отображаемого внутри него содержимого:

<div style="position: absolute; left: l00px; top: 50px; width:200px; border:1px solid red;"> </div>