Html Z-索引和引导_Html_Css_Twitter Bootstrap

Html Z-索引和引导

html css twitter-bootstrap

Html Z-索引和引导,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我试图在引导中对不同的“容器”进行z索引，以便将它们放在每个容器的顶部我对不同的容器进行了分类，并为它们提供了不同的z索引位置。什么也没发生下面是代码和css 代码注意：我添加了一些填充，以便看到容器层叠在一起谢谢你的回复z-index在position静态元素中不起作用。z-index只在positioned items上起作用谢谢你的回复：-）我现在正在阅读positioning。 <!DOCTYPE html> <html lang="en"> <h

我试图在引导中对不同的“容器”进行z索引，以便将它们放在每个容器的顶部

我对不同的容器进行了分类，并为它们提供了不同的z索引位置。什么也没发生

下面是代码和css

代码

注意：我添加了一些填充，以便看到容器层叠在一起

谢谢你的回复

z-index在position静态元素中不起作用。z-index只在positioned items上起作用谢谢你的回复：-）我现在正在阅读positioning。

<!DOCTYPE html>
<html lang="en">

<head>

    <title>Bootstrap test</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="css/bootstrap.css" rel="stylesheet" />
    <link rel="stylesheet" href="stylesheet.css" type="text/css"></link>

    <script src="js/bootstrap.min.js"></script>

</head>
<body>

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-sm-7 col">
                <h1>fælælflflflflf</h1>
                <p>
                    fkgkfklgkmnøblingbngæbkbjngækjndfælgkbjnfdækgjngfæbkjngfæbf gbkjnlfdkgbjngflkbjngfækbjnglkbnblkgjnblkgjbngflkbjgflkbjfkl
                    gfnæbæklkgjnbdkæjnblkjfdnblkdjngfkjbnlkjbnkgbjldkbjngklbjnkgjn
                </p>
            </div>
        </div>
    </div>

    <div class="container behind">
        <div class="row justify-content-center">
            <div class="col-sm-7 col">
                <h1>fælælflflflflf</h1>
                <p>
                    fkgkfklgkmnøblingbngæbkbjngækjndfælgkbjnfdækgjngfæbkjngfæbf gbkjnlfdkgbjngflkbjngfækbjnglkbnblkgjnblkgjbngflkbjgflkbjfkl
                    gfnæbæklkgjnbdkæjnblkjfdnblkdjngfkjbnlkjbnkgbjldkbjngklbjnkgjn
                </p>
            </div>
        </div>
    </div>

</body>
</html>

body {
    font-family: trebuchet ms;
    color:#666666; }

.container {
    z-index: 1;
}

.col {
    margin:20px;
    padding-bottom:20px;
    background-color:white;
    box-shadow:20px 20px 10px #0033cc;
}

.behind {
    padding-bottom:40px;
    z-index: 2;
}