Урок 7. Позиционирование.

Обычный (не обычный) порядок отображения элементов. Свойство position. Значения этого свойства: fixed, relative, absolute. Свойство z-index.

В html верстке, если нет ни каких соответствующих настроек, то элементы отображаются один за другим сверху вниз. Это обычный порядок отображения элементов.

Для нарушения этого порядка существуют соответствующие технологии, например flex, которую мы уже изучили.

Так же существует свойство position, которое мы рассмотрим в данном руководстве.

position:fixed;

свойство position со значением fixed заставит элемент находиться в одном месте экрана браузера не зависимо от прокрутки страницы.

    <style>

        button {

            position: fixed;

            background-color: red;

        }

    </style>

</head>

<body>

    <button>Нажми меня</button>

    <p>

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, sapiente! Illum esse voluptas, perspiciatis, amet beatae culpa dicta et minus necessitatibus maxime, natus temporibus earum. Doloremque numquam libero facilis laboriosam?

    </p>

Как видно из результата, кнопка остается слева вверху не зависимо от того, что страница уже прокручена.

Для настройки положения элемента с position:fixed в окне браузера необходимо использовать следующие свойства:

left – лево;
right – право;

top – верх;
bottom – низ.

Этим свойствам необходимо присваивать координату в любых единицах измерения размеров используемых в css. Пример:

        button {

            position: fixed;

            background-color: red;

            top: 50%;

            right: 100px;

        }

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

Так же стоит отметить, что при position:fixed место, которое элемент занимал бы без этого свойства занимается другим следующим по коду элементом.

Свойство z-index.

Когда на странице становится много элементов с position:fixed они начинают перекрывать друг друга. Пример:

Для того что бы настроить какой элемент должен находиться на переднем плане сущетвует свойство z-index, которому необходимо присвоить целое число. Тот элемент у которого это число будет больше, тот и будет полностью виден пользователю.

Например, настроим у красной кнопки z-index, что бы она была на переднем плане:

        button.red-button {

            position: fixed;

            background-color: red;

            top: 30px;

            left: 100px;

            z-index:100;

        }

        button.blue-button {

            position: fixed;

            background-color: blue;

            top: 40px;

            left: 150px;

        }

    </style>

</head>

<body>

    <p>

    </p>

    <button class="red-button">Красная кнопка</button>

    <button class="blue-button">Синяя кнопка</button>

    <p>

    </p>

Результат:

position:relative;

свойство position со значением relative заставит элемент сдвинуться относительно того положения, которое он занимает по умолчанию. При этом положение, которое элемент должен занимать при обычном порядке отображения другими элементами не занимается

    <style>

        button {

            position: relative;

            background-color: red;

            top: 30px;

            left: 100px;

        }

    </style>

</head>

<body>

    <p>

    </p>

    <button>Нажми меня</button>

    <p>

    </p>

Обратите внимание: серой рамкой здесь показано место, где должна находиться кнопка без position:relative. (В коде этой рамки нет)

Так же обратите внимание, что свойства left, right, bottom, top при position:relative указывают положение от того места, где элемент должен находиться.