把一个div放在css中的另一个div上

Question

我尝试使用html和css制作吉他照片。我使用了两个div，一个"id = frets"用于frets，另一个"id = strings_div"用于字符串。然后将第二个div放在第一个div的顶部，以便我可以显示字符串。我在网上搜索，似乎我应该将两个div的位置设置为absolute。然后将第二个div的z-index设置为99，这样就会显示字符串。但是，在运行我的代码后，不会显示字符串。我不确定我做错了什么。

#fretLeftVoid,
#fret1,
#fret2,
#fret3,
#fret4,
#fret5,
#fret6,
#fret7,
#fret8,
#fret9,
#fret10,
#fret11,
#fret12,
#fret13,
#fret14,
#fret15,
#fret16,
#fret17,
#fret18,
#fret19,
#fret20,
#fretRightVoid {
  position: relative;
  float: left;
  background: #755628;
  border-right: 4px solid #C0C0C0;
  height: 220px;
}
#fretLeftVoid {
  width: 15px;
}
#fret1 {
  width: 45px;
}
#fret2 {
  width: 40px;
}
#fret3 {
  width: 40px;
}
#fret4 {
  width: 40px;
}
#fret5 {
  width: 40px;
}
#fret6 {
  width: 40px;
}
#fret7 {
  width: 40px;
}
#fret8 {
  width: 40px;
}
#fret9 {
  width: 40px;
}
#fret10 {
  width: 40px;
}
#fret11 {
  width: 40px;
}
#fret12 {
  width: 40px;
}
#fret13 {
  width: 40px;
}
#fret14 {
  width: 40px;
}
#fret15 {
  width: 40px;
}
#fret16 {
  width: 40px;
}
#fret17 {
  width: 40px;
}
#fret18 {
  width: 40px;
}
#fret19 {
  width: 40px;
}
#fret20 {
  width: 40px;
}
#fretfretRightVoid {
  width: 40px;
}
#frets {
  position: absolute;
  background: #FFFF00;
  height: 300px;
  width: 950px;
}
#strings {
  padding: 0;
}
#strings li {
  height: 1px;
  width: 60%;
  margin: 20px 0px;
  background: #f00;
  list-style-type: none;
  left: 0px;
  float: left;
  position: relative;
}
#strings_div {
  z-index: 1;
}
#frets,
#strings_div {
  position: absolute;
}

<div id="fret1">1</div>
<div id="fret2">2</div>
<div id="fret3">3</div>
<div id="fret4">4</div>
<div id="fret5">5</div>
<div id="fret6">6</div>
<div id="fret7">7</div>
<div id="fret8">8</div>
<div id="fret9">9</div>
<div id="fret10">10</div>
<div id="fret11">11</div>
<div id="fret12">12</div>
<div id="fret13">13</div>
<div id="fret14">14</div>
<div id="fret15">15</div>
<div id="fret16">16</div>
<div id="fret17">17</div>
<div id="fret18">18</div>
<div id="fret19">19</div>
<div id="fret20">20</div>
<div id="fretRightVoid">21</div>
</div>
<div id="strings_div">
  <ul id="strings">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

这是运行结果的快照。

Answer 1

为什么字符串是列表？洛尔

无论如何，你没有给你的#strings_div任何宽度，这意味着当你的字符串宽度为60％时，那就是0％的60％！

＆＃13;

＆＃13;

#fretLeftVoid, #fret1, #fret2, #fret3, #fret4, 
#fret5, #fret6, #fret7,  #fret8, #fret9, #fret10, 
#fret11, #fret12, #fret13, #fret14, #fret15, #fret16, 
#fret17, #fret18,    #fret19, #fret20, 
#fretRightVoid {
    position:relative;
    float:left;
    background: #755628;
    border-right: 4px solid #C0C0C0;
    height:220px;
}

#fretLeftVoid {
    width:15px;
}

#fret1 {
    width:45px;
}

#fret2 {
    width:40px;
}

#fret3 {
    width:40px;
}

#fret4 {
    width:40px;
}

#fret5 {
    width:40px;
}

#fret6 {
    width:40px;
}

#fret7 {
    width:40px;
}

#fret8 {
    width:40px;
}

#fret9 {
    width:40px;
}

#fret10 {
    width:40px;
}
#fret11 {
    width:40px;
}
#fret12 {
    width:40px;
}

#fret13 {
    width:40px;
}

#fret14 {
    width:40px;
}

#fret15 {
    width:40px;
}
#fret16 {
    width:40px;
}

#fret17 {
    width:40px;
}

#fret18 {
    width:40px;
}

#fret19 {
    width:40px;
}

#fret20 {
    width:40px;
}

#fretfretRightVoid {
    width:40px;
}

#frets {
    position:absolute;
    background: #FFFF00;
    height:300px;
    width:950px;
}


#strings {
    padding:0;
}
#strings li {
    height: 1px;
    width: 60%;
    margin: 20px 0px;
    background: #f00;
    list-style-type: none;
    left:0px;
    float:left;
    position:relative;
}



#strings_div {
    z-index:1;
    width: 950px;
}

#frets, #strings_div {
    position: absolute;
}

＆＃13;

<div id = "frets">
            <div id = "fretLeftVoid">0</div>
            <div id = "fret1">1</div>
            <div id = "fret2">2</div>
            <div id = "fret3">3</div>
            <div id = "fret4">4</div>
            <div id = "fret5">5</div>
            <div id = "fret6">6</div>
            <div id = "fret7">7</div>
            <div id = "fret8">8</div>
            <div id = "fret9">9</div>
            <div id = "fret10">10</div>
            <div id = "fret11">11</div>
            <div id = "fret12">12</div>
            <div id = "fret13">13</div>
            <div id = "fret14">14</div>
            <div id = "fret15">15</div>
            <div id = "fret16">16</div>
            <div id = "fret17">17</div>
            <div id = "fret18">18</div>
            <div id = "fret19">19</div>
            <div id = "fret20">20</div>
            <div id = "fretRightVoid">21</div>
        </div>
        <div id = "strings_div">
                <ul id = "strings">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
        </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我认为您需要为#strings_div提供一些维度。我会给它提供与#frets相同的宽度和高度。

像这样：

#strings_div {
    height: 300px;
    width: 950px;
}

这是demo