Наложение элементов

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

Здравствуйте! На прошлом уроке мы с Вами рассмотрели позиционирование элементов в сетке грид, а на этом рассмотрим такую особенность, которая возникает при позиционировании элементов, как  наложение элементов в гриде.

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

Наложение элементов в Grid Layout

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width" />
        <title>Grid Layout в CSS3</title>
        <style>
            *{
                box-sizing: border-box;
            }
            html, body{
                margin:0;
                padding:0;
            }
            .container {
                height: 100vh;
                display: grid;
                grid-template-columns: repeat(3, 1.5fr);
                grid-template-rows: repeat(3, 1.5fr);
                grid-gap: 15px;
            }
            .item {
                text-align:center;
                font-size: 1.2em;
                padding: 1.5em;
                color: white;
                z-index: 10;
            }
            .item1{
                grid-area: 1 / 1 / 3 / 4;
                opacity: 0.8;
            }
            .item2{
                grid-area: 1 / 1 / 2 / 2;
            }
            .item3{
                grid-area: 1 / 3 / 2 / 4;
            }
            .item4{
                grid-area: 2 / 1 / 3 / 2;
            }
            .item5{
                grid-area: 2 / 2 / 3 / 3;
            }
            .item6{
                grid-area: 2 / 3 / 3 / 4;
            }
            .item7{
                grid-area: 3 / 1 / 4 / 2;
            }
            .cvet1 {background-color: red;}
            .cvet2 {background-color: green;}
            .cvet3 {background-color: orange;}
            .cvet4 {background-color: yellow;}
            .cvet5 {background-color: magenta;}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item item1 cvet2">Grid Item 2</div>
            <div class="item item2 cvet1">Grid Item 1</div>
            <div class="item item3 cvet3">Grid Item 3</div>
            <div class="item item4 cvet4">Grid Item 4</div>
            <div class="item item5 cvet1">Grid Item 5</div>
            <div class="item item6 cvet4">Grid Item 6</div>
            <div class="item item7 cvet5">Grid Item 7</div>
        </div>
    </body>
</html>

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

В примере 1-ый элемент будет  занимать то же пространство, что и 5 следующих за ним  элементов. С помощью свойства z-index: 10  у всех элементов получается, что  первый элемент как бы является фоном для остальных.

Есть также возможность перенести  слой из 1-го элемента поближе к пользователю, при этом накрыв  накрыв остальные элементы. Просто  увеличьте у него значение z-order:

.item1{
    grid-area: 1 / 1 / 3 / 4;
    opacity: 0.8;
    z-index: 10;
}
Прочитано 107 раз Последнее изменение Суббота, 07 октября 2017 12:13
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

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

Связной трэвел

Google+