Задание позиции элемента Если элемент не является статическим, то его позиция должна быть задана явно. Для этого используются четыре свойства: left, top, right и bottom, которые задают относительное смещение элемента. Если они не заданы, то положение и размер объемлющего элемент прямоугольника вычисляется автоматически. Эти свойства имеют тип <смещение>, который определяется следующим образом: <смещение> = <размер> | <процент> | auto <размер> Задает фиксированное смещение. <процент> Вычисляется относительно высоты или ширины вмещающего блока. auto Положение элемента по умолчанию в обычном потоке элементов. См. первый пункт и второй пункт. Верхняя позиция: свойство top Синтаксис: top: <смещение> | inherit Начально: auto Применимо: ко всем позиционированным элементам Наследуемо: нет Проценты: Вычисляется относительно высоты вмещающего блока. Устройства: визуальные Поддержка : Соответствует стандарту (4.0+) Соответствует стандарту (4.0+) Свойство top задает смещение позиционированного элемента относительно верхнего края вмещающего блока. Пример: <IMG src="sample.gif" style="position: absolute; left: 300px; top: 0"> Левая позиция: свойство left Синтаксис: left: <смещение> | inherit Начально: auto Применимо: ко всем позиционированным элементам Наследуемо: нет Проценты: Вычисляется относительно высоты вмещающего блока. Устройства: визуальные Поддержка : Соответствует стандарту (4.0+) Соответствует стандарту (4.0+) Свойство left задает смещение позиционированного элемента относительно левого края вмещающего блока. Пример: <IMG src="sample.gif" style="position: absolute; left: 300px; top: 0"> Нижняя позиция: свойство bottom Синтаксис: bottom: <смещение> | inherit Начально: auto Применимо: ко всем позиционированным элементам Наследуемо: нет Проценты: Вычисляется относительно высоты вмещающего блока. Устройства: визуальные Поддержка : Соответствует стандарту (4.0+) Соответствует стандарту (4.0+) Свойство bottom задает смещение позиционированного элемента относительно нижнего края вмещающего блока. Пример: <IMG src="sample.gif" style="position: absolute; right: 20px; bottom: 50px"> Правая позиция: свойство right Синтаксис: right: <смещение> | inherit Начально: auto Применимо: ко всем позиционированным элементам Наследуемо: нет Проценты: Вычисляется относительно высоты вмещающего блока. Устройства: визуальные Поддержка : Соответствует стандарту (4.0+) Соответствует стандарту (4.0+) Свойство right задает смещение позиционированного элемента относительно правого края вмещающего блока. Пример: <IMG src="sample.gif" style="position: absolute; right: 20px; bottom: 50px"> <<<  Назад Вперед  >>>  1  2  3  4   8  Комментарии к статье  8 8  Обсудить в чате

8  В тему Введение в таблицы стилей Селекторы, псевдоклассы и псевдоэлементы Значения свойств, каскадность и наследование Границы, заполнители и рамки Визуализация элементов Цвет и фон Шрифты Текст Таблицы Генерация содержимого, нумерация и списки Страничные устройства вывода Звуковые таблицы стилей