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

Разбить на страницы

Показывать лекцию целиком

Данные параметры позволяют определить положение элемента.

Примеры:

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

<html>
<head>
<style type="text/css">
p.left
{
position:relative;
left:-20px
}
p.right
{
position:relative;
right: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
`clip`		`auto`	4	1	6	2
`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
`z-index`	Задает порядковый номер элемента в стеке	`number`	4	1	6	2

Параметры позиционирования в 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`	Задает порядковый номер элемента в стеке

Страницы:

Данные параметры позволяют определить положение элемента.

Примеры:

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

<html>
<head>
<style type="text/css">
p.left
{
position:relative;
left:-20px
}
p.right
{
position:relative;
right: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>

<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
`clip`		`auto`	4	1	6	2
`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
`z-index`	Задает порядковый номер элемента в стеке	`number`	4	1	6	2

Параметры позиционирования в 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`	Задает порядковый номер элемента в стеке

Занятие пройдено

Предыдущее занятие Занятие пройдено Следующее занятие

Вернуться к учебному плану

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

Примеры:

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

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

Параметр 'bottom'

Параметр 'clip'

Параметр 'left'

Параметр 'overflow'

Параметр 'position'

Параметр 'right'

Параметр 'top'

Параметр 'vertical-align'

Параметр 'z-index'

Примеры:

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

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

Параметр 'bottom'

Параметр 'clip'

Параметр 'left'

Параметр 'overflow'

Параметр 'position'

Параметр 'right'

Параметр 'top'

Параметр 'vertical-align'

Параметр 'z-index'

Купить дополнительную попытку

Вы действительно хотите купить ещё одну попытку для прохождения тестирования?

Успешно!

Напишите нам, если у вас есть вопросы

Уважаемые пользователи ИНТУИТ!

Уважаемые пользователи ИНТУИТ!

Добро пожаловать на обновлённый сайт НОУ «ИНТУИТ»!