put one div over another div in css

Question

I tried to make a picture of guitar using html and css. I used two divs, one "id = frets" is for the frets and another one "id = strings_div" for strings. Then put second div on top of the first div so that I could show the strings. I searched on the web, it seems like that I should set the position of two divs as absolute. Then set the z-index of second div as 99 so strings will be shown. However, after running my code, strings are not shown. I am not sure what i did wrong.

#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>

This is the snapshot of running results.

Answer 1

Why are the strings a list? lol

Anyhow, you're not giving any width to your #strings_div, which means when your strings say 60% width, that's 60% of 0!

#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;
}

<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>

Answer 2

I think you need to give your #strings_div some dimensions. I would give it the same width and height as your #frets.

Like this:

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

Here is a demo