質問: ### 前提・実現したいこと jqueryUIを使った上でヘッダーを固定し、ヘッダー部分にボタンが乗っからないようにしたいので、ご教授頂けると大変助かります。 ### 発生している問題・エラーメッセージ ヘッダーを常に固定の位置に配置したデザインにしているのにも関わらず、スクロールした際にボタンがあるとそれが上に乗っかった状態で表示されてしまいます。 ### 該当のソースコード ``` $(function() { /* buttonのみ */ $(".button").button(); }); ``` ``` #header { height: 100px; width: 97%; position: fixed; /* 固定 */ top: 0; /* 一番上に表示 */ margin: 0 auto; background-color: #d7eeff; } ``` ### 試したこと cssのpositionが原因かな?と思い試行錯誤しましたが、結果は変わりませんでした。 ### 補足情報(言語/FW/ツール等のバージョンなど) jquery-ui-1.11.4.customをサーバーに置いた状態
回答: ボタンがヘッダーに重なってしまう、ということでしょうか? top: 0は、ウィンドウの上下左右において上との余白が0という指定になります。 重なり順の指定ははz-indexを使用します。 ``` #header { height: 100px; width: 97%; position: fixed; top: 0; margin: 0 auto; background-color: #d7eeff; z-index: 999 /* 重なり順の指定 */ } ``` 数が大きいほど上になります。 詳しくは検索してみてください。