0
htmlとcssを使ってギターの写真を作ってみました。 2つのdivを使用しましたが、1つは"id = frets"、もう1つは"id = strings_div"です。次に、最初のdivの上に2番目のdivを挿入して、文字列を表示できるようにします。ウェブで検索したところ、2つのdivの位置をabsoluteと設定する必要があります。次に、2番目のdivのz-indexを99に設定して、文字列を表示します。しかし、コードを実行した後、文字列は表示されません。私は何が間違っていたのか分かりません。1つのdivをCSSの別のdivに置きます
#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の列にまたがるように+ :)ヘッダを挟む場合の（ノート）の列をxは可能性ああ！レイアウト用のテーブル？ 50本のまつげ！ – j08691
ちょうど21フレットですか？ :) – sinisake