bootstrap4 には、fixed-top(bottom) というクラスにより、スクロールの影響を受けない固定クラスがあります。
このクラスを利用し、画面の上or下にボタンを表示したいのですが、コレをセンタリングできる方法がないか模索中です。
mx-autoを利用しセンタリング使用としたのですが、positon:fixed がかかるり
left:0 であれば左に、right:0であれば右に行くのですが、両者がかかってセンタリングになる想定がそうとはならないようです。
ボタンをwidth:100%のブロック要素で囲いセンタリングすることはできるのですが、ここで問題なのが
ボタンの下の赤い要素は、canvasのお絵かき部分なので、width:100%のブロック要素部分が邪魔してcanvasへの書き込みの
じゃまになってしまいます。
なにか良い方策は無いでしょうか?
ご教授お願いいたします
css
1#wrapper{ 2 background-color:green; 3 width:100%; 4 z-index:0; 5} 6#front{ 7 background-color:brown; 8 height:900px; 9 z-index:1000; 10 width:80%; 11}
模索1
html
1<button id="dragScroller" draggable="true" class="fixed-top mx-auto btn btn-link"> 2 <span class="fa-stack fa-2x"> 3 <i class="fas fa-circle fa-stack-2x"></i> 4 <i class="fas fa-arrows-alt fa-stack-1x fa-inverse"></i> 5 </span> 6</button> 7<canvas id="front" class="mx-auto">手書きエリア</canvas> 8
模索2
html
1<div id="wrapper" class="mx-auto fixed-top text-center"> 2<button id="dragScroller" draggable="true" class="btn btn-link"> 3 <span class="fa-stack fa-2x"> 4 <i class="fas fa-circle fa-stack-2x"></i> 5 <i class="fas fa-arrows-alt fa-stack-1x fa-inverse"></i> 6 </span> 7</button> 8</div> 9<canvas id="front" class="mx-auto">手書きエリア</canvas>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/29 05:26