Здравствуйте! Записался на ваш курс, но не понимаю как произвести оплату. Надо ли писать заявление и, если да, то куда отправлять? как я получу диплом о профессиональной переподготовке? |
Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 12:
Позиционирование в CSS
Параметры позиционирования в 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" не оказывает влияния.
Наследование: нет.
Примеры:
- В примере показано, как задать нижний край элемента pre на 50 px выше нижнего края окна:
pre { position: absolute; bottom: 50px }
- В примере показано, как задать нижний край элемента pre на 50 px ниже нижнего края окна:
pre { position: absolute; bottom: -50px }
Может принимать следующие значения:
Значение | Описание |
---|---|
auto | Позволяет браузеру самостоятельно вычислить нижнюю позицию |
% | Задает нижнюю позицию в % от положения нижнего края окна |
length | Задает нижнюю позицию в px, см, и т.д. от нижнего края окна. Допускаются отрицательные значения. |
Параметр 'clip'
Данный параметр задает форму элемента.
В ситуации если, например, изображение больше того элемента в котором располагается, параметр позволяет определить размеры изображения, обрезать по форме и вывести.
Примечание: Этот параметр нельзя использовать для элементов с параметром "overflow", заданным как "visible".
Наследование: нет.
Пример:
p { position:absolute; clip:rect(2px 175px 100px 0px) }
Может принимать следующие значения: