Question

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

我已经对不同的容器进行了分类，并为它们提供了不同的z-index位置。什么都没发生。

这是代码和css

代码

<!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>

CSS：

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;
}

注意：我添加了一些填充，以便看到彼此叠加的容器。

感谢您的回复

Z-index和bootstrap

0 个答案: