Позиционирование в CSS.относительное позиционирование, абсолютное позиционирование

CSS

скачать бесплатно – ” HTML на примерах, всё доступно и просто (для начинающих)”
– – –чайник, HTML ДЛЯ ЧАЙНИКОВ– – –
>> с к а ч а т ь <<

скачать бесплатно – “Как создать классный сайт!
От начала и до конца”
чайник, HTML ДЛЯ ЧАЙНИКОВ—>> с к а ч а т ь <<

Позиционирование в CSS.относительное позиционирование, абсолютное позиционированиеДля позиционирование блоков CSS используется элемент position.

# Position бывает:
абсолютное (absolute),
относительное (relative),
фиксированное (fixed).

 

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

.picture
{position: absolute;
top: 240px;
left: 280px;}

Координаты начинаются от краёв экрана, это top, left, right, bottom.

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

Пример:

позиционирование в css

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

Это позиция блока на экране, относительно позиции в HTML-документе. Например:

1. Заголовок Н1
2. Параграф
3. Блок 1
4. Блок 2 с относительным (relative)  позиционированием.
5. Блок 3

На экране элементы будут выводится  по очереди. Сначала заголовок, потом параграф. Блок 2 останется пустым и будет отображаться заданным координатам относительно своего расположения в очереди HTML документа. Блок 3 будет следующим.

Пример:

.picture
{position: relative;
top: 40px;
left: 80px;}

позиционирование в css

Фиксированное (fixed). позиционирование в CSS

.picture 
{position: fixed
top: 250px ;
right: 20px ; }

Фиксированное позиционирование чем-то схоже с Абсолютным. Вот только блок при таком позиционировании не прокручивается вместе с текстом, он остаётся на месте.

дальше. – Всплывающие блоки – “Поплавки”чайник, CSS ДЛЯ ЧАЙНИКОВ

 

 

 

 

Читайте также:  Как сделать красивую полосу прокрутки на Вашем сайте? CSS
Оцените статью
ЗАРАБОТОК В СЕТИ
Добавить комментарий