BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

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

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

Позиционирование блоков 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" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Блок в css</title>
 <style type="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 (низ).

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

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://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

По умолчанию

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

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

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

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

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

position: fixed;

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

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

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 734
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 4010