不能重叠#钢琴-键盘-八度-黑色>按钮

Question

我试图用HTML制作一个钢琴键盘，但即使在CSS中使用z-index: 1；，我也无法将黑色按钮重叠为白色。我也想要在JavaScript中发出声音的钥匙。我还需要定位黑色的按键，这样它们正好在两个白色的按钮之间，而我不能让白色的按钮紧靠在一起，它们是间隔的。

代码是

​

// JavaScript coming soon.

#piano-keyboard-octave-white > button {
  background-image: linear-gradient(to bottom, #eeeeee, #ffffff);
  border: 1px solid black;
  border-radius: 0px;
  width: inherit;
  height: 156px;
}
#piano-keyboard-octave-white > button:active {
  background-image: linear-gradient(to bottom, #cccccc, #eeeeee);
  border: 1px solid black;
  border-radius: 0px;
  width: inherit;
  height: 156px;
}
#piano-keyboard-octave-black > button {
  background-image: linear-gradient(to bottom, #111111, #000000);
  border: 1px solid black;
  border-radius: 0px;
  width: inherit;
  height: 62px;
  z-index: 1;
}
#piano-keyboard-octave-black {
  top: 50px;
  left: 50px;
}

<div id="container" class="octaves-4">
                <!---->
                    <div id="piano-keyboard-octave-white">
                      <button>
                        C
                      </button>
                      <button>
                        D
                      </button>
                      <button>
                        E
                      </button>
                      <button>
                        F
                      </button>
                      <button>
                        G
                      </button>
                      <button>
                        A
                      </button>
                      <button>
                        B
                      </button>
                      <div id="piano-keyboard-octave-black">
                      <button>
                        C
                      </button>
                      <button>
                        D
                      </button>
                        &nbsp;
                        &nbsp;
                      <button>
                        E
                      </button>
                      <button>
                        F
                      </button>
                      <button>
                        G
                      </button>
                      
                    </div>
                    </div>
                <!---->
                    <piano-keyboard-octave emoji="" octave="4"></piano-keyboard-octave>
                <!---->
                    <piano-keyboard-octave emoji="" octave="5"></piano-keyboard-octave>
                <!---->
                    <piano-keyboard-octave emoji="" octave="6"></piano-keyboard-octave>
                <!---->
            </div>

​

Answer 1

您需要给出键position:absolute;，以便它们像那样重叠。至于元素之间的间距，通常在这种情况下使用flexbox。