I'm builing a piano with HTML CSS and JS. So I have white keys, and black ones.
My problem is, I created all white keys, and now I have to position black keys.
If I set the black keys to absolute, they are behind the white keys. Of course, I need them in front. How can I do this ?
Thanks for your help !
.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 >
<div ></div>
<div >
<!-- first row -->
<div id="1" ><p >&</p></div>
<div id="1b" >
<p >1</p>
</div>
<div id="2" ><p >é</p></div>
<div id="2b" >
<p >2</p>
</div>
<div id="3" ><p >"</p></div>
<div id="4" ><p >'</p></div>
<div id="4b" >
<p >4</p>
</div>
<div id="5" ><p >(</p></div>
<div id="5b" >
<p >5</p>
</div>
<div id="6" ><p >§</p></div>
<div id="6b" >
<p >6</p>
</div>
<div id="7" ><p >è</p></div>
<div id="8" ><p >!</p></div>
<div id="8b" >
<p >8</p>
</div>
<div id="9" ><p >ç</p></div>
<div id="9b" >
<p >9</p>
</div>
<div id="0" ><p >à</p></div>
<!-- second row -->
<div id="a" ><p >a</p></div>
<div id="Ab" >
<p >A</p>
</div>
<div id="z" ><p >z</p></div>
<div id="Zb" >
<p >Z</p>
</div>
<div id="e" ><p >e</p></div>
<div id="Eb" >
<p >E</p>
</div>
<div id="r" ><p >r</p></div>
<div id="t" ><p >t</p></div>
<div id="Tb" >
<p >T</p>
</div>
<div id="y" ><p >y</p></div>
<div id="Yb" >
<p >Y</p>
</div>
<div id="u" ><p >u</p></div>
<div id="i" ><p >i</p></div>
<div id="Ib" >
<p >I</p>
</div>
<div id="o" ><p >o</p></div>
<div id="Ob" >
<p >O</p>
</div>
<div id="p" ><p >p</p></div>
<div id="Pb" >
<p >P</p>
</div>
<!-- third row -->
<div id="q" ><p >q</p></div>
<div id="s" ><p >s</p></div>
<div id="Sb" >
<p >S</p>
</div>
<div id="d" ><p >d</p></div>
<div id="Db" >
<p >D</p>
</div>
<div id="f" ><p >f</p></div>
<div id="g" ><p >g</p></div>
<div id="Gb" >
<p >G</p>
</div>
<div id="h" ><p >h</p></div>
<div id="Hb" >
<p >H</p>
</div>
<div id="j" ><p >j</p></div>
<div id="Jb" >
<p >J</p>
</div>
<div id="k" ><p >k</p></div>
<div id="l" ><p >l</p></div>
<div id="Lb" >
<p >L</p>
</div>
<div id="m" ><p >m</p></div>
<div id="Mb" >
<p >M</p>
</div>
<!-- fourth row -->
<div id="w" ><p >w</p></div>
<div id="x" ><p >x</p></div>
<div id="Xb" >
<p >X</p>
</div>
<div id="c" ><p >c</p></div>
<div id="Cb" >
<p >C</p>
</div>
<div id="v" >
<p >v</p>
</div>
<div id="Vb" >
<p >V</p>
</div>
<div id="b" ><p >b</p></div>
<div id="n" ><p >n</p></div>
</div>
</div>
<script src="index.js""></script>
</body>
</html>CodePudding user response：
You don't need absolute for z-indexing, you can use relative. Try setting the black keys to 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 >
<div ></div>
<div >
<!-- first row -->
<div id="1" ><p >&</p></div>
<div id="1b" >
<p >1</p>
</div>
<div id="2" ><p >é</p></div>
<div id="2b" >
<p >2</p>
</div>
<div id="3" ><p >"</p></div>
<div id="4" ><p >'</p></div>
<div id="4b" >
<p >4</p>
</div>
<div id="5" ><p >(</p></div>
<div id="5b" >
<p >5</p>
</div>
<div id="6" ><p >§</p></div>
<div id="6b" >
<p >6</p>
</div>
<div id="7" ><p >è</p></div>
<div id="8" ><p >!</p></div>
<div id="8b" >
<p >8</p>
</div>
<div id="9" ><p >ç</p></div>
<div id="9b" >
<p >9</p>
</div>
<div id="0" ><p >à</p></div>
<!-- second row -->
<div id="a" ><p >a</p></div>
<div id="Ab" >
<p >A</p>
</div>
<div id="z" ><p >z</p></div>
<div id="Zb" >
<p >Z</p>
</div>
<div id="e" ><p >e</p></div>
<div id="Eb" >
<p >E</p>
</div>
<div id="r" ><p >r</p></div>
<div id="t" ><p >t</p></div>
<div id="Tb" >
<p >T</p>
</div>
<div id="y" ><p >y</p></div>
<div id="Yb" >
<p >Y</p>
</div>
<div id="u" ><p >u</p></div>
<div id="i" ><p >i</p></div>
<div id="Ib" >
<p >I</p>
</div>
<div id="o" ><p >o</p></div>
<div id="Ob" >
<p >O</p>
</div>
<div id="p" ><p >p</p></div>
<div id="Pb" >
<p >P</p>
</div>
<!-- third row -->
<div id="q" ><p >q</p></div>
<div id="s" ><p >s</p></div>
<div id="Sb" >
<p >S</p>
</div>
<div id="d" ><p >d</p></div>
<div id="Db" >
<p >D</p>
</div>
<div id="f" ><p >f</p></div>
<div id="g" ><p >g</p></div>
<div id="Gb" >
<p >G</p>
</div>
<div id="h" ><p >h</p></div>
<div id="Hb" >
<p >H</p>
</div>
<div id="j" ><p >j</p></div>
<div id="Jb" >
<p >J</p>
</div>
<div id="k" ><p >k</p></div>
<div id="l" ><p >l</p></div>
<div id="Lb" >
<p >L</p>
</div>
<div id="m" ><p >m</p></div>
<div id="Mb" >
<p >M</p>
</div>
<!-- fourth row -->
<div id="w" ><p >w</p></div>
<div id="x" ><p >x</p></div>
<div id="Xb" >
<p >X</p>
</div>
<div id="c" ><p >c</p></div>
<div id="Cb" >
<p >C</p>
</div>
<div id="v" >
<p >v</p>
</div>
<div id="Vb" >
<p >V</p>
</div>
<div id="b" ><p >b</p></div>
<div id="n" ><p >n</p></div>
</div>
</div>
<script src="index.js""></script>
</body>
</html>CodePudding user response：
Try looking into a solution with z-index CSS property, that will allow for stackable absolute elements
CodePudding user response：
Set z-index css property on black keys, higher than white keys.