156 Управление позиционированием
Определение положения по отношению к левому верхнему углу Наряду с полями, которые задаются как часть свойств элемента (см. раздел «Поле элемента» в главе 7), позиционированному элементу можно присваивать значения top и left (листинг 8.2). Они используются для указания положения элемента по отношению к левой и верхней сторонам родительского элемента или по отношению к обычному положению (рис. 8.3–8.5).
Определение верхнего и левого поля 1. position:absolute; Чтобы установить положение элемента с помощью свойств top и left, нужно включить в то же правило свойство position. 2. left: В списке CSS-определений или в атрибуте style в HTML-тэге напишите название свойства left и поставьте двоеточие. 3. 9em; Укажите расстояние, на которое вы хотите переместить элемент вправо, используя следующие значения (табл. 8.2): – длину. Определяется расстояние от левого края элемента до левого края окна или родительского элемента; – проценты, например 55%. Перемещение задается относительно ширины родительского элемента; – auto. Расстояние вычисляется браузером, если элемент является абсолютным. Иначе left приравнивается к нулю.
Листинг 8.2. После выбора типа позиционирования можно определить расстояние от начала координат до левой и верхней стороны элемента. Началом координат для элемента считается левый верхний угол окна, левый верхний угол его родительского элемента или его собственный верхний левый угол
<html> <head> <style type="text/css"> #object1 { position: absolute; top: 125px; left: 12em; border: silver solid 2px; } .changeplace { position: relative; top: 1cm; left: 1cm; background-color: #ffcccc; } </style> </head> <body> <div id="object1"> <img scr="alice27.gif" width="250" ->height="225" border="0" ->align="left"> <p>'I want a<span class= ->"changeplace"> clean cup</span>,' ->interrupted the Hatter: 'let's all ->move one place on.'</p> <p>He moved on as he spoke, and the ->Dormouse followed him...</p> <p>Alice didn't wish to offend the ->Dormouse again...</p> <p>'You can draw water out of a ->water-well...</p> </div> </body> </html> Таблица 8.2. Возможные значения свойств top и left Значение
Совместимость
<length>
IE4, N4, CSS2
<percentage>
IE4, N4, CSS2
auto
IE4, N4, CSS2