z-index-group

Use this block for creating several layers of the blocks that are located one above the other on a page.

Overview

Modifiers of the block

Modifier	Acceptable value	Use acse	Description
level	Integer number from 0 to 9	`BEMJSON`, `JS`	The layer level.

Block description

Use the z-index-group block to place the blocks in layers one above the others. The level modifier controls the block layer position on z-axis.

Modifiers of the block

`level` modifier

Acceptable values: integer number from 0 to 9.

Use cases: BEMJSON, JS.

When blocks overlap, the level modifier determines which one covers the other.

The block with the larger level value covers the block with the lower one. If two blocks have the same level value, the block that is declared in BEMJSON later will cover the other one.

{
    block : 'popup',
    mix : { block : 'z-index-group', mods : { level : 1 } },
    mods : { autoclosable : true, theme : 'islands' },
    content : 'I am under the block with { level : 2 } value!'
}

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">
</head>

<body class="page page_theme_islands">
    <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">
</head>

<body class="page page_theme_islands">
    <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
            ]
        }
    }
]

Methodology

Technology

Toolbox

Libraries

Tutorials

z-index-group

Overview

Modifiers of the block

Block description

Modifiers of the block

`level` modifier

Send feedback