0
Я попытался сделать снимок гитары, используя html и css. Я использовал два divs, один "id = frets" для ладов и еще один "id = strings_div" для строк. Затем поместите второй div поверх первого div, чтобы я мог показать строки. Я искал в Интернете, мне кажется, что я должен установить положение двух divs как absolute. Затем установите z-index второго div как 99, чтобы были показаны строки. Однако после запуска моего кода строки не отображаются. Я не уверен, что я сделал не так.положите один div над другим div в css
#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>Это снимок бегущих результатов. 
вы могли бы использовать таблицу для этого, 6 строк для каждой строки и столбцы х для случая (заметки), чтобы зажать :) + заголовок, чтобы охватить столбцы для ритма –
@GCyrillus Ack! Таблицы для макета? 50 ресниц! – j08691
Всего 21 лад? :) – sinisake