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

Оцените материал
(0 голосов)

Здравствуйте! Продолжаем тему Позиционирование в CSS и сегодня рассмотрим фиксированное позиционирование. Фиксированное позиционирование является распространенным способом удержать в области просмотра браузера некоторые элементы. Достаточно часто на различных сайтах можно увидеть фиксированную панель навигации, которая не изменяет своего положения вне зависимости от прокрутки.

Для фиксированного позиционирования у элементов нужно установить значение fixed для свойства position. После этого с помощью стандартных свойств left, right, top и bottom можно определить конкретную позицию фиксированного элемента.

 

Создадим к примеру фиксированную панель навигации:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Позиционирование в HTML5</title>
        <style>
            body{
                margin:0;
                padding:0;
            }
            .toolbar{
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                background-color: #222;
                border-bottom: 1px solid #ccc;
            }
            .toolbar a{
                color: #eee;
                display: inline-block;
                padding: 10px;
                text-decoration: none;
                font-family: Verdana;
            }
            .content{
                margin-top: 50px;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div class="toolbar">
            <a href="#">Главная</a>
            <a href="#">Блог</a>
            <a href="#">Контакты</a>
            <a href="#">О сайте</a>
        </div>
        <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            Lorem Ipsum has been the industry....</div>
    </body>
</html>

Просмотреть  пример

Чтобы растянуть фиксированный блок от левой до правой границы страницы, устанавливаются три свойства:

top: 0;
left: 0;
right: 0;

Для нижележащего блока с основным содержанием фиксированный элемент фактически не существует разметке, так как блок с фиксированным, как и с абсолютным позиционированием не учавствуют в стандартном потоке html. Поэтому по умолчанию оба блока будут накладываться друг на друга и размещатьс в одной точке. И нам надо должным образом разместить блок содержимого относительно фиксированного блока, например, установив нужный отступ:

margin-top: 50px;

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

Прочитано 669 раз Последнее изменение Воскресенье, 25 сентября 2016 10:38
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

Поиск по сайту

Google+