Параметр '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 | Если содержимое обрезается, то браузер должен вывести полосу прокрутки для просмотра всего содержимого. |
Параметр '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 работает только с теми элементами, которые были позиционированы (например, position:absolute;)!
Наследование: нет.
Пример:
img { position:absolute z-index: 1 }
Может принимать следующие значения:
| auto | Порядковый номер элемента в стека равен номеру родительского элемента |
| number | Задает порядковый номер элемента в стеке |
Параметры позиционирования в CSS
Параметры позиционирования в CSS позволяют:
определить левую, правую, верхнюю, и нижнюю позиции элемента:задать форму элемента:поместить элемент позади другого:определить, что будет происходить, когда содержимое элемента слишком большое для размещения в указанной области.
Данные параметры поддерживаются следующими браузерами: Internet Explorer, Firefox, Netscape.
| 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 |
В примере показано, как позиционировать
- В примере показано, как позиционировать элемент относительно его обычного положения. <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">Параграф имеет абсолютное местоположение и смещен на 100px от левого края страницы и на 150px от верха страницы</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>
