質問: 初めて投稿します。JavaScript初心者です。 HandsonTableというライブラリを使用してサンプルアプリケーションを作成 しようとしています。 イメージとしては下記の様な感じです。 |ヘッダー領域| |コンテンツ領域| ←ここにHandsonTableでデータ表示したい |フッター領域| HandsonTableで表示するレコードをヘッダ含めて コンテンツ領域に表示させたいと考えておりますが レイアウト面の表示がうまくいかず問題を解決したいと 考えております。 色々と情報を探してみたのですが解決に繋がる情報がなく 困っております。どうかご回答をお願いいたします。 ### 発生している問題・エラーメッセージ CSSで制御したいと考えて設定してみましたが コンテンツ領域とヘッダ領域が被っている状態です。 ※本来はヘッダ領域の下にコンテンツ領域を配置したい。 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/c23e4e301bde482a517a5473b1d77c57.png) CSS ``` /* ヘッダ領域 */ header { float:top; width: 100%; height: 10%; overflow: hidden; position: fixed; top: 0px; left: 0; z-index: 200; } /* コンテンツ領域 */ #main { margin-top: 120px; padding-top: 120px z-index: 100; overflow: auto; } ``` ### 試したこと コンテンツ領域のz-indexの値をヘッダ領域より大きくすると ヘッダ領域がコンテンツ領域の後ろに入ってしまいヘッダが 隠れてしまいます。 ヘッダ領域のz-indexの値をコンテンツ領域のものより大きく するとヘッダ領域がコンテンツ領域の上に被る形になって しまいます。 どうやらHandsonTableでz-indexの値に関わらず ページの最上部に固定されているようです。 ### 補足情報(言語/FW/ツール等のバージョンなど) JavaScript handsontable 0.29.1
回答: ``` body { margin: 0; padding: 10vh 0; } /* ヘッダ領域 */ header { /* 削除 float:top; height: 10%; */ width: 100%; height: 10vh; overflow: hidden; position: fixed; top: 0px; left: 0; z-index: 200; } /* コンテンツ領域 */ #main { /* 削除 margin-top: 120px; padding-top: 120px z-index: 100; overflow: auto; */ } ``` **動くサンプル:**