CSSでモーダルウィンドウで固定した要素内のトップ・ボトムを更に固定させたい

やりたい事↓
**「div.modal-top-fixed」**は、モーダルウィンドウ内のトップに固定させて常に表示。
**「div.modal-bottom-fixed」**は、モーダルウィンドウ内のボトムに固定させて常に表示。
**「div.modal-inner」**モーダルウィンドウ内でスクロールさせたい。

以下、ソースコードです。
「div.modal-top-fixed」、**「div.modal-bottom-fixed」**が固定されずに一緒に動いてしまいます。

<!doctype html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<style type="text/css">
  .mask{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1;
    background-color: rgba(0,0,0,0.7);
  }
  .modal-wrap{
    width: 100%;
    max-width: 700px;
    height: 500px;
    position: fixed;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: translateY(-50%);
    z-index: 100;
    background-color: #FFF;
    overflow-y: scroll;
  }
  .modal-top-fixed{
    width: 100%;
    height: 50px;
    position: fixed;
    background-color: #FFF;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    z-index: 101;
  }
  .modal-inner{
    padding-top: 50px;
    height: 1500px;
  }
  .modal-bottom-fixed{
    width: 100%;
    height: 50px;
    position: fixed;
    background-color: #FFF;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.1);
    z-index: 101;
  }
</style>
</head>
<body>

  <div class="modal-wrap">
    <div class="modal-top-fixed">
    Top固定
    </div>
    <div class="modal-inner">
      スクロールさせたいコンテンツ
    </div>
    <div class="modal-bottom-fixed">
      Bottom固定
    </div>
  </div>

  <div class="mask"></div>
</body>
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

fixed はビューポートに対しての固定配置なので、stickyを使ってはいかがですか？

css
1  .modal-top-fixed{
2    position: sticky;
3    top: 0;
4  }
5  .modal-bottom-fixed{
6    position: sticky;
7    bottom: 0;
8  }
9

投稿2020/07/04 02:47

Lhankor_Mhy

総合スコア36960

komurojun

2020/07/04 03:53

ありがとうございます。無事実装出来ました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

CSSでモーダルウィンドウで固定した要素内のトップ・ボトムを更に固定させたい

関連した質問