###実現したいこと
下の画像のように、div要素のside-menu-barの横にsvg要素を並べて表示したいと考えています。
発生している問題
display: flexを指定して、svg要素にD3.jsでグラフを描画していますが、div要素(side-menu-bar)の下に表示されてしまい、グラフが見えなくなってしまいます。
おそらくですが、svg要素の上にside-menu-barが重なっていることが問題なのではないかと考えています・・・。
該当のソースコード
HTML
1 <div id="vis"> 2 <div id="side-menu-bar"></div> 3 <div id="graph"> 4 <svg></svg> 5 </div> 6 </div>
CSS
1#vis { 2 display: -webkit-flex; 3 display: flex; 4} 5 6#side-menu-bar { 7 height: 100%; 8 width: 160px; 9 position: fixed; 10 top: 0; 11 left: 0; 12 background-color: #111; 13 overflow-x: hidden; 14 padding-top: 20px; 15} 16 17svg { 18 background-color: #BAD3FF; 19 width: 100%; 20}
HTML, CSSの初心者ですが、よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/08/16 13:44
2018/08/16 13:59
退会済みユーザー
2018/08/18 03:58