Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 12:

Позиционирование в CSS

< Лекция 11 || Лекция 12: 1234 || Лекция 13 >

Параметры позиционирования в CSS

Параметры позиционирования в CSS позволяют:

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

Данные параметры поддерживаются следующими браузерами: Internet Explorer, Firefox, Netscape.

Параметр Описание Значения IE F N W3C
bottom Задает, насколько далеко нижний край элемента находится выше/ниже нижнего края родительского элемента auto 5 1 6 2
%
length
clip Задает форму элемента. Элемент вырезается по форме и выводится. shape 4 1 6 2
auto
left Задает, насколько далеко левый край элемента находится правее/левее левого края родительского элемента auto 4 1 4 2
%
length
overflow Определяет, что происходит, когда содержимое элемента переполняет его область visible 4 1 6 2
hidden
scroll
auto
position Помещает элемент в статическое, относительное, абсолютное или фиксированное положение static 4 1 4 2
relative
absolute
fixed
right Задает, насколько далеко правый край элемента находится левее/правее правого края родительского элемента auto 5 1 6 2
%
length
top Задает, насколько далеко верхний край элемента находится выше/ниже верхнего края родительского элемента auto 4 1 4 2
%
length
vertical-align Задает выравнивание элемента по вертикали baseline 4 1 4 1
sub
super
top
text-top
middle
bottom
text-bottom
length
%
z-index Задает порядковый номер элемента в стеке auto 4 1 6 2
number

Параметры позиционирования в CSS: подробное рассмотрение

Параметр 'bottom'

Данный параметр определяет нижний край элемента.

Примечание:Если параметр "position" имеет значение "static", параметр "bottom" не оказывает влияния.

Наследование: нет.

Примеры:

  1. В примере показано, как задать нижний край элемента pre на 50 px выше нижнего края окна:
    pre
    {
    position: absolute;
    bottom: 50px
    }
  2. В примере показано, как задать нижний край элемента pre на 50 px ниже нижнего края окна:
    pre
    {
    position: absolute;
    bottom: -50px
    }

Может принимать следующие значения:

Значение Описание
auto Позволяет браузеру самостоятельно вычислить нижнюю позицию
% Задает нижнюю позицию в % от положения нижнего края окна
length Задает нижнюю позицию в px, см, и т.д. от нижнего края окна. Допускаются отрицательные значения.
Параметр 'clip'

Данный параметр задает форму элемента.

В ситуации если, например, изображение больше того элемента в котором располагается, параметр позволяет определить размеры изображения, обрезать по форме и вывести.

Примечание: Этот параметр нельзя использовать для элементов с параметром "overflow", заданным как "visible".

Наследование: нет.

Пример:

p
{
position:absolute;
clip:rect(2px 175px 100px 0px)
}

Может принимать следующие значения:

Значение Описание
shape Задает форму элемента. Допустимым значением формы является: rect (top, right, bottom, left)
auto Браузер задает форму элемента
< Лекция 11 || Лекция 12: 1234 || Лекция 13 >
Федор Антонов
Федор Антонов

Здравствуйте!

Записался на ваш курс, но не понимаю как произвести оплату.

Надо ли писать заявление и, если да, то куда отправлять?

как я получу диплом о профессиональной переподготовке?

Илья Ардов
Илья Ардов

Добрый день!

Я записан на программу. Куда высылать договор и диплом?

Наталья Алмаева
Наталья Алмаева
Россия
Светлана Казьмина
Светлана Казьмина
Россия, Волгодонск