z-index-group

Используется для формирования на странице нескольких слоев блоков, располагающихся друг над другом.

Обзор блока

Модификаторы блока

Модификатор	Допустимые значения	Способы использования	Описание
level	Целое число от 0 до 9	`BEMJSON`	Уровень слоя.

Описание блока

Блок z-index-group располагает блоки слоями друг над другом. Их размещением по z-оси управляет модификатор level.

Модификаторы блока

Модификатор `level`

Допустимые значения: целые числа от 0 до 9.

Способы использования: BEMJSON.

Определяет уровень слоя блока относительно других слоев блоков на странице.

Чем больше значение модификатора level, тем выше находится слой. При равных значениях level на переднем плане находится тот слой, который в BEMJSON задекларирован позже.

На примере ниже открывающееся всплывающее окно не перекрывает другие блоки, находящиеся на странице. Например, шапка страницы всегда остается на первом плане:

{
    block : 'popup',
    mix : { block : 'z-index-group', mods : { level : 1 } },
    content : 'Я блок с { level : 1 }, который находится под блоком с { level : 2 }.'
    mods : { autoclosable : true, theme : 'normal' },
}

Open in a new window

<!DOCTYPE html>
<html class="ua_js_no">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>z-index-group</title>
    <script>
        (function(e, c) {
            e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
        })(document.documentElement, "className");
        (function(d, n) {
            d.documentElement.className += " ua_svg_" + (d[n] && d[n]("http://www.w3.org/2000/svg", "svg").createSVGRect ? "yes" : "no");
        })(document, "createElementNS");
    </script>
    <link rel="stylesheet" href="10-z-index-group.css">
    <meta name="viewport" content="width=device-width,maximum-scale=1,initial-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link name="apple-mobile-web-app-capable" content="yes">
</head>

<body class="page page_theme_islands ua i-bem" data-bem='{"ua":{}}'>
    <div class="popup popup_target_position popup_theme_islands popup_size_bigger z-index-group z-index-group_level_1 i-bem" data-bem='{"popup":{}}' aria-hidden="true">I am block with { level : 1 }, which is under block with { level : 2 }.</div>
    <div class="popup popup_target_position popup_autoclosable popup_theme_islands z-index-group z-index-group_level_2 i-bem" data-bem='{"popup":{}}' aria-hidden="true">I am block with { level : 2 }.</div>
    <script src="10-z-index-group.js"></script>
</body>

</html>

{
    block: 'page',
    title: 'z-index-group',
    head: [
        {
            elem: 'css',
            url: '10-z-index-group.css'
        }
    ],
    scripts: [
        {
            elem: 'js',
            url: '10-z-index-group.js'
        }
    ],
    mods: {
        theme: 'islands'
    },
    content: [
        {
            block: 'popup',
            js: {
                lazyInit: false
            },
            mods: {
                target: 'position',
                theme: 'islands',
                size: 'bigger'
            },
            mix: {
                block: 'z-index-group',
                mods: {
                    level: 1
                }
            },
            content: [
                'I am block with { level : 1 }, which is under block with { level : 2 }.'
            ]
        },
        {
            block: 'popup',
            js: {
                lazyInit: false
            },
            mods: {
                target: 'position',
                autoclosable: true,
                theme: 'islands'
            },
            mix: {
                block: 'z-index-group',
                mods: {
                    level: 2
                }
            },
            content: 'I am block with { level : 2 }.'
        }
    ]
}

[
    {
        block: 'page',
        mods: {
            theme: 'islands'
        }
    },
    {
        block: 'popup',
        mods: {
            target: 'position',
            theme: 'islands',
            size: 'bigger',
            autoclosable: true
        }
    },
    {
        block: 'z-index-group',
        mods: {
            level: [
                2,
                1
            ]
        }
    }
]

Open in a new window

<!DOCTYPE html>
<html class="ua_js_no">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>z-index-group</title>
    <script>
        (function(e, c) {
            e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
        })(document.documentElement, "className");
        (function(d, n) {
            d.documentElement.className += " ua_svg_" + (d[n] && d[n]("http://www.w3.org/2000/svg", "svg").createSVGRect ? "yes" : "no");
        })(document, "createElementNS");
    </script>
    <link rel="stylesheet" href="10-z-index-group.css">
    <meta name="viewport" content="width=device-width,maximum-scale=1,initial-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link name="apple-mobile-web-app-capable" content="yes">
</head>

<body class="page page_theme_islands ua i-bem" data-bem='{"ua":{}}'>
    <div class="popup popup_target_position popup_theme_islands popup_size_bigger z-index-group z-index-group_level_1 i-bem" data-bem='{"popup":{}}' aria-hidden="true">I am block with { level : 1 }, which is under block with { level : 2 }.</div>
    <div class="popup popup_target_position popup_autoclosable popup_theme_islands z-index-group z-index-group_level_2 i-bem" data-bem='{"popup":{}}' aria-hidden="true">I am block with { level : 2 }.</div>
    <script src="10-z-index-group.js"></script>
</body>

</html>

{
    block: 'page',
    title: 'z-index-group',
    head: [
        {
            elem: 'css',
            url: '10-z-index-group.css'
        }
    ],
    scripts: [
        {
            elem: 'js',
            url: '10-z-index-group.js'
        }
    ],
    mods: {
        theme: 'islands'
    },
    content: [
        {
            block: 'popup',
            js: {
                lazyInit: false
            },
            mods: {
                target: 'position',
                theme: 'islands',
                size: 'bigger'
            },
            mix: {
                block: 'z-index-group',
                mods: {
                    level: 1
                }
            },
            content: [
                'I am block with { level : 1 }, which is under block with { level : 2 }.'
            ]
        },
        {
            block: 'popup',
            js: {
                lazyInit: false
            },
            mods: {
                target: 'position',
                autoclosable: true,
                theme: 'islands'
            },
            mix: {
                block: 'z-index-group',
                mods: {
                    level: 2
                }
            },
            content: 'I am block with { level : 2 }.'
        }
    ]
}

[
    {
        block: 'page',
        mods: {
            theme: 'islands'
        }
    },
    {
        block: 'popup',
        mods: {
            target: 'position',
            theme: 'islands',
            size: 'bigger',
            autoclosable: true
        }
    },
    {
        block: 'z-index-group',
        mods: {
            level: [
                2,
                1
            ]
        }
    }
]

Методология

Технологии

Инструментарий

Библиотеки

Учебные материалы

z-index-group

Обзор блока

Модификаторы блока

Описание блока

Модификаторы блока

Модификатор `level`

Отправить отзыв

Методология

Технологии

Инструментарий

Библиотеки

Учебные материалы

z-index-group

Обзор блока

Модификаторы блока

Описание блока

Модификаторы блока

Модификатор level

Модификатор `level`