StepkinBlog.ru
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
15.03.2017
11:36
8214
пока нет
Позиционирование блоков CSS. Основы CSS для начинающих. Урок №14
Всем привет!
В сегодняшнем уроке я расскажу, как при помощи позиционирования блоков можно размещать элемент в любом месте экрана.
Что нам дает позиционирование блоков? С помощью позиционирования блоков веб-мастер сможет создать любой уникальный дизайн сайта, размещая блоки там, где ему хочется. Чтобы разместить блоки в любом месте экрана, достаточно указать координаты.
Координаты в CSS
Свойство «TOP» | «LEFT» | «RIGHT» | «BOTTOM»
К позиционированию блоков обязательно прописывают координаты, то есть, где будет размещен блок.
Схема системы координат:
Координаты указываются четырьмя правилами:
- top - вверх;
- left - лево;
- right - право;
- bottom - вниз.
Синтаксис:
Правило_Координата: значение_координата;
Значение:
Значение указывать в px или в %.
Пример:
top:100px; /* верхний край*/ left:100px; /* левый край*/
Достаточно только указывать координаты на два края (на top или bottom, на left или right).
Позиционирование в CSS
Свойство «POSITION»
Позиционирование прописывается в CSS через правило «position» с нужным значением.
Синтаксис:
position: значение;
Значение:
- absolute – абсолютное;
- relative – относительное;
- fixed – фиксированное.
Давайте пройдемся по каждому значению.
Абсолютное позиционирование в CSS
Значение «ABSOLUTE»
Абсолютное позиционирование дает возможность веб-мастеру разместить блоки на веб-странице в любом месте экрана. Достаточно в CSS прописать правило «position» со значением «absolute» и нужными координатами:
position:absolute; /* абсолютное позиционирование*/
Пример:
<html>
<head>
<title>Блок в css</title>
<style>
.blok1
{
position:absolute; /* абсолютное позиционирование*/
top:100px; /* от верхнего края*/
right:50px; /* от верхнего правого края*/
}
</style>
</head>
<body>
<p>
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
CSS can be added to HTML elements in 3 ways:
Inline - by using the style attribute in HTML elements
Internal - by using a element in the section
External - by using an external CSS file
The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will use inline and internal styling, because this is easier to demonstrate, and easier for you to try it yourself.
</p>
<div class="blok1">
<img src="heder.png">
</div>
</body>
</html>
Результат:
Относительное позиционирование в CSS
Значение «RELATIVE»
Относительное позиционирование дает возможность веб-мастеру сместить блок на веб-странице, но первоначальное место блока не освобождается для другого элемента. В CSS пропишите правило «position» со значением «relative» и нужными координатами:
position:relative; /* относительное позиционирование*/
Пример:
<html>
<head>
<title>Блок в css</title>
<style>
.blok1
{
position:relative; /* относительное позиционирование*/
top:100px;
left:100px;
}
</style>
</head>
<body>
<div class="blok1">
<img src="heder.png">
</div>
<p>
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
CSS can be added to HTML elements in 3 ways:
Inline - by using the style attribute in HTML elements
Internal - by using a element in the section
External - by using an external CSS file
The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will use inline and internal styling, because this is easier to demonstrate, and easier for you to try it yourself.
</p>
</body>
</html>
Результат:
По умолчанию
Относительное позиционирование
Фиксированное позиционирование в CSS
Значение «FIXED»
Фиксированное позиционирование дает возможность веб-мастеру разместить блоки на веб-странице в любом месте экрана и при прокрутке веб-страницы блок будет всегда располагаться относительно окна браузера (всегда будет виден на экране). Достаточно в CSS прописать правило «position» со значением «fixed» и нужными координатами:
position:fixed; /* фиксированное позиционирование*/
Пример:
<html>
<head>
<title>Блок в css</title>
<style>
.blok1
{
position: fixed; /* фиксированное позиционирование*/
top:0px;
left:100px;
}
</style>
</head>
<body>
<div class="blok1">
<img src="heder.png">
</div>
<p>
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
CSS can be added to HTML elements in 3 ways:
Inline - by using the style attribute in HTML elements
Internal - by using a element in the section
External - by using an external CSS file
The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will use inline and internal styling, because this is easier to demonstrate, and easier for you to try it yourself.
</p>
</body>
</html>
Если результат не виден и не понятен, добавьте текста столько, чтобы на экране веб-страницы появилась полоса прокрутки.
Вот и закончили урок! Осталось еще 2-3 урока и вы закончите осваивать основы CSS. Это значит, что вы сможете с легкостью создавать красивые сайты.
Не пропустите остальные уроки! Подписывайтесь на обновления!