Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы CSS » Позиционирование блоков CSS. Основы CSS для начинающих. Урок №14

15.03.2017


11:36


2603


пока нет


Позиционирование блоков CSS. Основы CSS для начинающих. Урок №14

Позиционирование блоков CSS. Основы CSS для начинающих. Урок №14

Всем привет!
В сегодняшнем уроке я расскажу, как при помощи позиционирования блоков можно размещать элемент в любом месте экрана.
Что нам дает позиционирование блоков? С помощью позиционирования блоков веб-мастер сможет создать любой уникальный дизайн сайта, размещая блоки там, где ему хочется. Чтобы разместить блоки в любом месте экрана, достаточно указать координаты.

Координаты в CSS

Свойство «TOP» | «LEFT» | «RIGHT» | «BOTTOM»
К позиционированию блоков обязательно прописывают координаты, то есть, где будет размещен блок.

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

Позиционирование блоков CSS. Основы CSS для начинающих. Урок №14

Координаты указываются четырьмя правилами:

  • 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

Относительное позиционирование в 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

По умолчанию

 

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

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

Фиксированное позиционирование в 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. Это значит, что вы сможете с легкостью создавать красивые сайты.
Не пропустите остальные уроки! Подписывайтесь на обновления!



Случайные записи:

  1. Коротко о PHP. Основы PHP с нуля. Урок №1
  2. Плавающие блоки в CSS. Основы CSS для начинающих. Урок №15
  3. Как сделать таблицу в HTML. Основы HTML для начинающих. Урок №14
  4. Создание дополнительных классов. Основы bootstrap 3 для начинающих. Урок №23
  5. Горизнтальное меню. Основы bootstrap 3 для начинающих. Урок №10

Последние записи рубрики:

  1. Бесплатный курс по основам CSS
  2. Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу
  3. Тесты CSS онлайн. Основы CSS для начинающих
  4. Слои в CSS. Основы CSS для начинающих. Урок №16
  5. Плавающие блоки в CSS. Основы CSS для начинающих. Урок №15

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

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

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

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

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 231

Уведомление для пользователей AdBlock

Включая adblock (блокировщик рекламы) вы лишаете меня заработка, и тем самым лишаете смысла трудиться над своим сайтом, помогать вам и отвечать на комментарии. Если вы решились отключить adblock для моего блога, спасибо!

Как отключить AdBlock?