Question

所以我有一个div想要出现在页面上每个其他div的前面。这是我的所有代码：

<!DOCTYPE html>
<html>
<head>
    <title>Koowalk Game Development - Home</title>
    <link rel="stylesheet" href="koowalk.css"/>
</head>
<body>
    <h4 id="header">KOOWALK</h4>
    <h4 id="headerb">GAMES</h4>

    <p>Hello. We're Koowalk Games. We make games.</p>

    <div id="work">
        <p id="workheader">Games</p>

        <div id="workbar"></div>

        <script type="text/javascript">
        var bar = document.getElementById("workbar");
        var x = 0;

        window.onload = change;

        function change() {
            requestAnimationFrame(color);
        }

        function color() {
            bar.style.background = "hsl(" + x + ", 100%, 50%)";
            if (x < 358) {
                x++;
                requestAnimationFrame(color);
            }

            else {
                x = 0;
                requestAnimationFrame(color);
            }
        }
        </script>

        <div class="workleft">
            <p class="headerleft">Some Game</p>

            <p class="pleft">This will be some kind of description of the game. There will also     be a picture to the left. Cause I know how much you love pictures. I'm in bio. Dransfield is about to yell at me. Except he isn't. Why am I writing this, you might ask? Just think appearences. It's all about the appearences.</p>
        </div>

        <div id="sliding1"></div>
    </div>
</body>
</html>

CSS：

@font-face {font-family: "Veger"; src: url('Fonts/Veger(light).ttf'); }
@font-face {font-family: "Kloe"; src: url('Fonts/ff4a_kloe_thin-web.ttf'); }

::selection {
    background-color: #e2e2e2;
    color: white;
}

::-moz-selection {
    background-color: hsl(0, 0%, 89%);
    color: white;
}

body {
    background: #5a5a5a;
    font-family: Veger;
    color: white;
    text-align: center;
}
#header {
    font-size: 100px;
    color: #49ffdc;
}

#headerb {
    font-size: 100px;
    margin-top: -145px;
    color: #ffff63;
}

p {
    font-family: Kloe, sans;
    font-size: 40px;
    margin-left: 15%;
    margin-right: 15%;
    margin-top: -40px;
}

#work {
    position: absolute;
    left: 0px;
    right: 0px;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 500px;
    background: #ff4545;
    margin-top: 100px;
}

#workheader {
    font-family: Kloe, sans;
    font-size: 80px;
    margin-top: 10px;
}

#workbar {
    float: left;
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
    height: 3px;
    margin-top: -70px;
    background: hsl(0, 100%, 50%);
}

.workleft {
    float: left;
    width: 40%;
    margin-left: 3%;
    margin-top: -20px;
    height: 300px;
    background: #5a5a5a;
    color: white;
    font-family: Kloe, sans;
    text-align: right;
}

.headerleft {
    margin-right: 5%;
    font-size: 50px;
    margin-top: -5px;
}

.pleft {
    margin-right: 5%;
    margin-left: 50%;
    font-size: 15px;

}

#sliding1 { //This is the div that needs to appear in front of everything
    z-index: 2;
    width: 47%;
    height: 10px;
    color: #06168d;
}

正如你所看到的，＃sliding1是我需要在其他一切之前得到的div。我之前从未使用过z-index。 div出现了，但它落后于一切。你如何准确地使用z-index？

编辑：这不重复。我查看了大多数其他问题，所提供的所有答案都没有用。我现在有位置：绝对，它仍然不起作用。

Answer 1

要使用z-index，您必须在元素中添加position。

#sliding1 {
    z-index: 2;
    position: relative;
}

CSS中的z-index属性控制垂直堆叠顺序重叠的元素。就像在，哪一个看起来好像是在物理上离你更近。 z-index仅影响具有位置的元素 static以外的值（默认值）。

参考：css-tricks

Z指数问题

1 个答案: