Главная » Все про CSS » Позиционирование блоков CSS

Позиционирование блоков CSS

2014-05-25 / Вр:23:58 / просмотров: 8892

Позиционирование блока позволяет размещать элемент в любом месте экрана. С помощью позиционирования блоков веб мастер может создать любой вид сайта.

Схема системы координат:

Позиционирование блоков CSS бывает:

absolute – абсолютным;
relative – относительным;
fixed – фиксированным.

Абсолютное позиционирование в CSS

Абсолютное позиционирование позволяет разместить блок на веб-странице в любом месте экрана. Обозначается абсолютное позиционирование вот так:

position:absolute;

Абсолютное позиционирование имеет атрибуты:
- top (вверх);
- left (лево);
- right (право);
- bottom (низ).

Координаты задаются от края экрана в px. Достаточно только указывать координаты на два значения (либо на top (вверх) или bottom (низ), либо на left (лево) или right (право)).

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Блок в css</title>
 <style ENGINE="text/css">
 .blok1
{
position:absolute;
top:100px;
right:100px;
}
 </style>
 </head>
 <body>
<p> Абсолютное позиционирование позволяет разместить блок на веб-странице в любом месте экрана. Обозначается абсолютное позиционирование вот так:
position:absolute;
Абсолютное позиционирование имеет атрибуты:
- top (вверх);
- left (лево);
- right (право);
- bottom (низ).
Координаты задаются от края экрана в px. Достаточно только указывать координаты на два значения (либо на top (вверх) или bottom (низ), либо на left (лево) или right (право)).
</p>
 <div class="blok1">
<img src="kartinka.jpg">
 </div>
 </body>
</html>

Результат:

Абсолютное позиционирование в CSS

Относительное позиционирование в CSS

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

Обозначается относительное позиционирование вот так:

position:relative;

Относительное позиционирование имеет атрибуты:
- top (вверх);
- left (лево);
- right (право);
- bottom (низ).

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Блок в css</title>
 <style type="text/css">
 .blok1
{
position:relative;
top:100px;
left:100px;
}
 </style>
 </head>
 <body>
 <div class="blok1">
<img src="kartinka.jpg">
 </div>
 <p> Абсолютное позиционирование позволяет разместить блок на веб-странице в любом месте экрана. Обозначается абсолютное позиционирование вот так:
position:absolute;
Абсолютное позиционирование имеет атрибуты:
- top (вверх);
- left (лево);
- right (право);
- bottom (низ).
Координаты задаются от края экрана в px. Достаточно только указывать координаты на два значения (либо на top (вверх) или bottom (низ), либо на left (лево) или right (право)).
</p>
 </body>
</html>

Результат:

По умолчанию

Относительное позиционирование

Фиксированное позиционирование в CSS

Фиксированное позиционирование позволяет разместить блок на веб-странице в любом месте экрана, так как и абсолютное позиционирование. Разница между фиксированным и абсолютным позиционированием в том, что в фиксированной позиции блок или элемент всегда будет располагаться относительно окна браузера. Если сказать простыми словами, фиксированный элемент зафиксируется на веб-странице и не сдвинется во время прокрутки, то есть, всегда будет виден на экране.

Обозначается фиксированное позиционирование вот так:

position: fixed;

Фиксированное позиционирование имеет атрибуты:
- top (вверх);
- left (лево);
- right (право);
- bottom (низ).

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Блок в css</title>
 <style type="text/css">
 .blok1
{
position: fixed;
top:100px;
left:100px;
}
 </style>
 </head>
 <body>
 <div class="blok1">
<img src="kartinka.jpg">
 </div>
 <p> Абсолютное позиционирование позволяет разместить блок на веб-странице в любом месте экрана. Обозначается абсолютное позиционирование вот так:
position:absolute;
Абсолютное позиционирование имеет атрибуты:
- top (вверх);
- left (лево);
- right (право);
- bottom (низ).
Координаты задаются от края экрана в px. Достаточно только указывать координаты на два значения (либо на top (вверх) или bottom (низ), либо на left (лево) или right (право)).
</p>
 </body>
</html>

Результат:

Фиксированное позиционирование в CSS