Данные параметры позволяют определить положение элемента.
Примеры:
- В примере показано, как позиционировать элемент относительно его обычного положения.
<html>
<head>
<style type="text/css">
p.left
{
position:relative;
left:-20px
}
p.right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<p>Параграф</p>
<p class="left">Параграф смещен влево относительно обычного положения </p>
<p class="right">Параграф смещен вправо относительно обычного положения</p>
</body>
</html>
- В примере показано, как позиционировать элемент с помощью абсолютного значения.
<html>
<head>
<style type="text/css">
p.ab
{
position:absolute;
left:75px;
top:200px
}
</style>
</head>
<body>
<p class="ab">Параграф имеет абсолютное местоположение и
смещен на 75px от левого края страницы и на 200px от верха страницы</p>
<p>Параграф</p>
</body>
</html>
- В примере показано, как задать форму элемента, по которой он обрезается и выводится.
<html>
<head>
<style type="text/css">
p
{
position:absolute;
clip:rect(2px 250px 250px 0px)
}
</style>
</head>
<body>
<p>Обрезается параграф параграф параграф:</p>
<p></p>
</body>
</html>
- В примере показано, как использовать параметр overflow для определения действий, когда содержимое элемента не помещается в указанной области.
<html>
<head>
<style type="text/css">
div
{
background-color:yellow;
width:175px;
height:70px;
overflow: auto
}
</style>
</head>
<body>
<p>Если содержимое элемента превышает заданные значения ширины и
высоты необходимо использовать параметр overflow который определяет,
что делать в этой ситуации.</p>
<div>
В данном случае переполняется бокс элемента и overflow определяет,
что делать - установлено значение auto.
</div>
</body>
</html>
- В примере показано, как выравнять в тексте изображение по вертикали.
<html>
<head>
<style type="text/css">
img.first {vertical-align:text-bottom}
img.second {vertical-align:text-top}
</style>
</head>
<body>
<p>
Пара-
<img class="second" border="0"
src="image.gif" width="100" height="100" />
граф.
</p>
<p>
Пара-
<img class="first" border="0" border-color="blue"
src="image.gif" width="100" height="100" />
граф.
</p>
</body>
</html>
- В примере показано, как можно использовать Z-index для размещения элемента "позади" другого элемента.
<html>
<head>
<style type="text/css">
img.index
{
position:absolute;
left:10px;
top:40px;
z-index:-1;
}
</style>
</head>
<body>
<h4>Пример использования Z-index</h4>
<img class="index" src="image.gif" width="120" height="150" border="1">
<p>Изображение с z-index равным -1 имеет меньший приоритет,
поэтому расположено "позади".</p>
</body>
</html>
- В примере показано, что произойдет если элементы из предыдущего примера изменят свои значения Z-index.
<html>
<head>
<style type="text/css">
img.index
{
position:absolute;
left:10px;
top:40px;
z-index:1
}
</style>
</head>
<body>
<h4>Пример использования Z-index</h4>
<img class="index" src="image.gif" width="120" height="150" border="3">
<p>Изображение с z-index равным 1 имеет более высокий приоритет,
поэтому расположено "спереди".</p>
</body>
</html>
Параметры позиционирования в 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)
}
Может принимать следующие значения:
| Значение |
Описание |
| shape |
Задает форму элемента. Допустимым значением формы является: rect (top, right, bottom, left) |
| auto |
Браузер задает форму элемента |
Параметр 'left'
Данный параметр определяет левый край элемента.
Примечание: Если параметр "position" имеет значение "static", параметр "left" не оказывает влияния.
Наследование: нет.
Примеры:
- В примере показано, как задать левый край элемента pre в 50 px справа от левого края окна:
pre
{
position: absolute;
left: 50px
}
- В примере показано, как задать левый край элемента pre в 50 px слева от левого края окна:
pre
{
position: absolute;
left: -50px
}
Может принимать следующие значения:
| Значение |
Описание |
| auto |
Позволяет браузеру вычислить левую позицию. |
| % |
Задает левую позицию в % от значения для левого края окна. |
| length |
Задает левую позицию в px, см и т.д. от левого края окна. Допускаются отрицательные значения. |
Параметр 'overflow'
Данный параметр определяет, что происходит, когда содержимое элемента переполняет его область.
Наследование: нет.
Пример:
div
{
overflow: auto
}
Может принимать следующие значения:
| Значение |
Описание |
| visible |
Содержимое не обрезается. Оно выводится за пределами элемента. |
| hidden |
Содержимое обрезается, но браузер не выводит полосу прокрутки для просмотра всего содержимого. |
| scroll |
Содержимое обрезается, но браузер выводит полосу прокрутки для просмотра всего содержимого. |
| auto |
Если содержимое обрезается, то браузер должен вывести полосу прокрутки для просмотра всего содержимого.
|
Параметр 'position'
Данный параметр помещает элемент в статическое, относительное, абсолютное или фиксированное положение.
Наследование: нет.
Пример:
p
{
position:static;
}
Может принимать следующие значения:
| Значение |
Описание |
| static |
Элемент помещается в обычное положение (согласно нормальному потоку). Для значения "static" параметры "left" и "top" не используются. |
| relative |
Перемещает элемент относительно нормального положения, так что "left:20" добавляет 20 пикселей к позиции LEFT элемента |
| absolute |
С помощью значения "absolute" элемент можно разместить в любом месте страницы. Позиция элемента определяется параметрами "left", "top", "right", и "bottom" |
| fixed |
|
Параметр 'right'
Данный параметр определяет правый край элемента.
Примечание: Если параметр "position" имеет значение "static", то параметр "right" не оказывает влияния.
Наследование: нет.
Примеры:
- В примере показано, как задать правый край элемента pre на 50 px влево от правого края окна:
pre
{
position: absolute;
right: 50px
}
- В примере показано, как задать правое поле элемента pre на 50 px вправо от правого края окна:
pre
{
position: absolute;
right: -50px
}
Может принимать следующие значения:
| Значение |
Описание |
| auto |
Позволяет браузеру вычислить правую позицию. |
| % |
Задает правую позицию в % от значения правого края окна. |
| length |
Задает правую позицию в px, см, и т.д. от правого края окна. Допускаются отрицательные значения. |
Параметр 'top'
Данный параметр определяет верхний край элемента.
Примечание: Если параметр "position" имеет значение "static", то параметр "top" не оказывает влияния.
Наследование: нет.
Примеры:
- В примере показано, как задать верхний край элемента pre на 50 px ниже верхнего края окна:
pre
{
position: absolute;
top: 50px
}
- В примере показано, как задать верхний край элемента pre на 50 px выше верхнего края окна:
pre
{
position: absolute;
top: -50px
}
Может принимать следующие значения:
| Значение |
Описание |
| auto |
Позволяет браузеру вычислить верхнюю позицию. |
| % |
Задает верхнюю позицию в % от значения верхнего края окна. |
| length |
Задает верхнюю позицию в px, см, и т.д. от верхнего края окна. Допускаются отрицательные значения. |
Параметр 'vertical-align'
Данный параметр задает вертикальное выравнивание элемента.
Наследование: нет.
Примеры:
img
{
vertical-align: baseline
}
Может принимать следующие значения:
| Значение |
Описание |
| baseline |
Элемент размещается на базовой строке родительского элемента. |
| sub |
Выравнивает элемент как нижний индекс |
| super |
Выраванивает элемент как верхний индекс |
| top |
Вершина элемента выравнивается с вершиной самого высокого элемента в строке |
| text-top |
Вершина элемента выравнивается с вершиной шрифта родительского элемента |
| middle |
Элемент помещается в середине родительского элемента |
| bottom |
Нижняя часть элемента выравнивается с самым нижним элементом в строке |
| text-bottom |
Нижняя часть элемента выравнивается с минимальной нижней точкой родительского элемента |
| length |
|
| % |
Выравнивает элемент в % от значения параметра "line-height". Допускаются отрицательные значения.
|
Параметр 'z-index'
Данный параметр задает порядковый номер элемента в стеке. Элемент с большим порядковым номером стека всегда находится перед элементом с меньшим порядковым номером стека.
Примечания:
- Элементы могут иметь отрицательные порядковые номера стека.
- Z-index работает только с теми элементами, которые были позиционированы не как static (например, position:absolute;)!
Наследование: нет.
Пример:
img
{
position:absolute
z-index: 1
}
Может принимать следующие значения:
| Значение |
Описание |
| auto |
Порядковый номер элемента в стека равен номеру родительского элемента |
| number |
Задает порядковый номер элемента в стеке
|
|
Посмотреть
порно видео в онлайне »