相对元素前面的绝对元素 CSS

Question

我正在用 HTML CSS 和 JS 制作钢琴。所以我有白键和黑键。

我的问题是，我创建了所有白键，现在我必须定位黑键。如果我将黑键设置为 absolute，它们位于白键后面。当然，我需要他们在前面。我该怎么做？

感谢您的帮助！

.container {
    border: 3px solid black;
    background-color: black;
    border-radius: 10px;
    margin: 60px auto;
    width: 100%;
}

.mix {
    height: 150px;
    background-color: rgb(29, 29, 29);
}

.keyboard {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.white-key {
    width: 29px;
    height: 200px;
    border: 1px solid gray;
    background-color: white;
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
}

.black-key {
    right: 20px;
    width: 20px;
    height: 130px;
    background-color: rgb(27, 27, 27);
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
}
.key {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    bottom: 20px;
    font-size: 0.8em;
    font-weight: bold;
}

.txt-white {
    color: white;
}

.active {
    opacity: 0.8;
}

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>Piano App</title>
    <link rel="icon" type="image/x-icon" href="https://www.favicon.cc/logo3d/121615.png">
</head>
<body>
    <div class="container">
        <div class="mix"></div>
        <div class="keyboard">
            <!-- first row -->
            <div id="1" class="white-key"><p class="key">&</p></div>
            <div id="1b" class="black-key">
                <p class="key">1</p>
            </div>
            <div id="2" class="white-key"><p class="key">é</p></div>
            <div id="2b" class="black-key">
                <p class="key">2</p>
            </div>
            <div id="3" class="white-key"><p class="key">"</p></div>
            <div id="4" class="white-key"><p class="key">'</p></div>
            <div id="4b" class="black-key">
                <p class="key">4</p>
            </div>
            <div id="5" class="white-key"><p class="key">(</p></div>
            <div id="5b" class="black-key">
                <p class="key">5</p>
            </div>
            <div id="6" class="white-key"><p class="key">§</p></div>
            <div id="6b" class="black-key">
                <p class="key">6</p>
            </div>
            <div id="7" class="white-key"><p class="key">è</p></div>
            <div id="8" class="white-key"><p class="key">!</p></div>
            <div id="8b" class="black-key">
                <p class="key">8</p>
            </div>
            <div id="9" class="white-key"><p class="key">ç</p></div>
            <div id="9b" class="black-key">
                <p class="key">9</p>
            </div>
            <div id="0" class="white-key"><p class="key">à</p></div>
            
            <!-- second row -->
            <div id="a" class="white-key"><p class="key">a</p></div>
            <div id="Ab" class="black-key">
                <p class="key">A</p>
            </div>
            <div id="z" class="white-key"><p class="key">z</p></div>
            <div id="Zb" class="black-key">
                <p class="key">Z</p>
            </div>
            <div id="e" class="white-key"><p class="key">e</p></div>
            <div id="Eb" class="black-key">
                <p class="key">E</p>
            </div>
            <div id="r" class="white-key"><p class="key">r</p></div>
            <div id="t" class="white-key"><p class="key">t</p></div>
            <div id="Tb" class="black-key">
                <p class="key">T</p>
            </div>
            <div id="y" class="white-key"><p class="key">y</p></div>
            <div id="Yb" class="black-key">
                <p class="key">Y</p>
            </div>
            <div id="u" class="white-key"><p class="key">u</p></div>
            <div id="i" class="white-key"><p class="key">i</p></div>
            <div id="Ib" class="black-key">
                <p class="key">I</p>
            </div>
            <div id="o" class="white-key"><p class="key">o</p></div>
            <div id="Ob" class="black-key">
                <p class="key">O</p>
            </div>
            <div id="p" class="white-key"><p class="key">p</p></div>
            <div id="Pb" class="black-key">
                <p class="key">P</p>
            </div>
            
            <!-- third row -->
            <div id="q" class="white-key"><p class="key">q</p></div>
            <div id="s" class="white-key"><p class="key">s</p></div>
            <div id="Sb" class="black-key">
                <p class="key">S</p>
            </div>
            <div id="d" class="white-key"><p class="key">d</p></div>
            <div id="Db" class="black-key">
                <p class="key">D</p>
            </div>
            <div id="f" class="white-key"><p class="key">f</p></div>
            <div id="g" class="white-key"><p class="key">g</p></div>
            <div id="Gb" class="black-key">
                <p class="key">G</p>
            </div>
            <div id="h" class="white-key"><p class="key">h</p></div>
            <div id="Hb" class="black-key">
                <p class="key">H</p>
            </div>
            <div id="j" class="white-key"><p class="key">j</p></div>
            <div id="Jb" class="black-key">
                <p class="key">J</p>
            </div>
            <div id="k" class="white-key"><p class="key">k</p></div>
            <div id="l" class="white-key"><p class="key">l</p></div>
            <div id="Lb" class="black-key">
                <p class="key">L</p>
            </div>
            <div id="m" class="white-key"><p class="key">m</p></div>
            <div id="Mb" class="black-key">
                <p class="key">M</p>
            </div>
            
            <!-- fourth row -->
            <div id="w" class="white-key"><p class="key">w</p></div>
            <div id="x" class="white-key"><p class="key">x</p></div>
            <div id="Xb" class="black-key">
                <p class="key">X</p>
            </div>
            <div id="c" class="white-key"><p class="key">c</p></div>
            <div id="Cb" class="black-key">
                <p class="key">C</p>
            </div>
            <div id="v" class="white-key">
                <p class="key">v</p>
            </div>
            <div id="Vb" class="black-key">
                <p class="key txt-white">V</p>
            </div>
            <div id="b" class="white-key"><p class="key">b</p></div>
            <div id="n" class="white-key"><p class="key">n</p></div>
        </div>
    </div>


    <script src="index.js""></script>
</body>
</html>

Answer 1

尝试使用 z-index CSS 属性寻找解决方案，这将允许可堆叠的绝对元素

Answer 2

在黑键上设置z-indexcss属性，高于白键。

Answer 3

z-indexing不需要absolute，可以使用relative。尝试将黑键设置为 position: relative;

.container {
    border: 3px solid black;
    background-color: black;
    border-radius: 10px;
    margin: 60px auto;
    width: 100%;
}

.mix {
    height: 150px;
    background-color: rgb(29, 29, 29);
}

.keyboard {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.white-key {
    width: 29px;
    height: 200px;
    border: 1px solid gray;
    background-color: white;
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
}

.black-key {
    position: relative;
    right: 20px;
    width: 20px;
    height: 130px;
    background-color: rgb(27, 27, 27);
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
}
.key {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    bottom: 20px;
    font-size: 0.8em;
    font-weight: bold;
}

.txt-white {
    color: white;
}

.active {
    opacity: 0.8;
}

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>Piano App</title>
    <link rel="icon" type="image/x-icon" href="https://www.favicon.cc/logo3d/121615.png">
</head>
<body>
    <div class="container">
        <div class="mix"></div>
        <div class="keyboard">
            <!-- first row -->
            <div id="1" class="white-key"><p class="key">&</p></div>
            <div id="1b" class="black-key">
                <p class="key">1</p>
            </div>
            <div id="2" class="white-key"><p class="key">é</p></div>
            <div id="2b" class="black-key">
                <p class="key">2</p>
            </div>
            <div id="3" class="white-key"><p class="key">"</p></div>
            <div id="4" class="white-key"><p class="key">'</p></div>
            <div id="4b" class="black-key">
                <p class="key">4</p>
            </div>
            <div id="5" class="white-key"><p class="key">(</p></div>
            <div id="5b" class="black-key">
                <p class="key">5</p>
            </div>
            <div id="6" class="white-key"><p class="key">§</p></div>
            <div id="6b" class="black-key">
                <p class="key">6</p>
            </div>
            <div id="7" class="white-key"><p class="key">è</p></div>
            <div id="8" class="white-key"><p class="key">!</p></div>
            <div id="8b" class="black-key">
                <p class="key">8</p>
            </div>
            <div id="9" class="white-key"><p class="key">ç</p></div>
            <div id="9b" class="black-key">
                <p class="key">9</p>
            </div>
            <div id="0" class="white-key"><p class="key">à</p></div>
            
            <!-- second row -->
            <div id="a" class="white-key"><p class="key">a</p></div>
            <div id="Ab" class="black-key">
                <p class="key">A</p>
            </div>
            <div id="z" class="white-key"><p class="key">z</p></div>
            <div id="Zb" class="black-key">
                <p class="key">Z</p>
            </div>
            <div id="e" class="white-key"><p class="key">e</p></div>
            <div id="Eb" class="black-key">
                <p class="key">E</p>
            </div>
            <div id="r" class="white-key"><p class="key">r</p></div>
            <div id="t" class="white-key"><p class="key">t</p></div>
            <div id="Tb" class="black-key">
                <p class="key">T</p>
            </div>
            <div id="y" class="white-key"><p class="key">y</p></div>
            <div id="Yb" class="black-key">
                <p class="key">Y</p>
            </div>
            <div id="u" class="white-key"><p class="key">u</p></div>
            <div id="i" class="white-key"><p class="key">i</p></div>
            <div id="Ib" class="black-key">
                <p class="key">I</p>
            </div>
            <div id="o" class="white-key"><p class="key">o</p></div>
            <div id="Ob" class="black-key">
                <p class="key">O</p>
            </div>
            <div id="p" class="white-key"><p class="key">p</p></div>
            <div id="Pb" class="black-key">
                <p class="key">P</p>
            </div>
            
            <!-- third row -->
            <div id="q" class="white-key"><p class="key">q</p></div>
            <div id="s" class="white-key"><p class="key">s</p></div>
            <div id="Sb" class="black-key">
                <p class="key">S</p>
            </div>
            <div id="d" class="white-key"><p class="key">d</p></div>
            <div id="Db" class="black-key">
                <p class="key">D</p>
            </div>
            <div id="f" class="white-key"><p class="key">f</p></div>
            <div id="g" class="white-key"><p class="key">g</p></div>
            <div id="Gb" class="black-key">
                <p class="key">G</p>
            </div>
            <div id="h" class="white-key"><p class="key">h</p></div>
            <div id="Hb" class="black-key">
                <p class="key">H</p>
            </div>
            <div id="j" class="white-key"><p class="key">j</p></div>
            <div id="Jb" class="black-key">
                <p class="key">J</p>
            </div>
            <div id="k" class="white-key"><p class="key">k</p></div>
            <div id="l" class="white-key"><p class="key">l</p></div>
            <div id="Lb" class="black-key">
                <p class="key">L</p>
            </div>
            <div id="m" class="white-key"><p class="key">m</p></div>
            <div id="Mb" class="black-key">
                <p class="key">M</p>
            </div>
            
            <!-- fourth row -->
            <div id="w" class="white-key"><p class="key">w</p></div>
            <div id="x" class="white-key"><p class="key">x</p></div>
            <div id="Xb" class="black-key">
                <p class="key">X</p>
            </div>
            <div id="c" class="white-key"><p class="key">c</p></div>
            <div id="Cb" class="black-key">
                <p class="key">C</p>
            </div>
            <div id="v" class="white-key">
                <p class="key">v</p>
            </div>
            <div id="Vb" class="black-key">
                <p class="key txt-white">V</p>
            </div>
            <div id="b" class="white-key"><p class="key">b</p></div>
            <div id="n" class="white-key"><p class="key">n</p></div>
        </div>
    </div>


    <script src="index.js""></script>
</body>
</html>

相对元素前面的绝对元素 CSS

Absolute element in front of relative element CSS

html

css