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

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

ただいまの
回答率

87.60%

CSSで右上に「✕ボタン」を固定したい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 7,681

score 6

前提

モーダルの真ん中にテキストエリアを配置しています。

ポイントは、「テキストエリアの高さ>画面の高さ」となった場合も、テキストエリアの位置は真ん中を維持し、かつ上下に「padding:50 0;」を持たせている点です。

実現したいこと

この前提において、右上に「×ボタン」を固定したいです。

イメージ説明

発生している問題

「×ボタン」を右上に固定することができません。
該当のCSSではスクロールによって隠れてしまいます。

該当のCSS

上の画像のコードは下記です。

同じですがサンプル(https://jsfiddle.net/e0n23u7q/)もございます。

<div class="modal">
    <div class="close_modal">
      <button type="button"></button>
    </div>
    <div class="outer">
      <div class="inner">
         <div class="editable" contenteditable="true"></div>
      </div>
    </div>
</div>
.modal {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100vw;
    z-index: 100;
    display: flex;
    align-items: center;        
    justify-content: center;
    overflow: hidden scroll;
    background: green;
}
.close_modal {
    position: absolute;
    top: 0;
    right: 0;
}
.outer {
    position: relative;
    width: 200px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto; 
}
.inner {
    width: 200px;
    min-height: 100px;
    padding: 50px 0;
    margin: 0 auto;
}
.editable {
    width: 200px;
    min-height: 100px;
    background: palegreen;
    white-space: pre-wrap;
}

試したこと

まずはお馴染みの「position: sticky;」を試しました。下記の追加です。

ですが外側にある「.modal」の「display: flex;」が効いてしまい、「×ボタン」はテキストエリアと横並びになってしまいました。

/* 該当のCSSに追加 */
.close_modal {
    position: sticky; 
}
.close_modal > button {
    position: absolute;
    right: 0;
}


横並びになってしまうならば、と考えたのが「.modal」の「display: flex;」に「flex-direction: column;」を設定することです。

/* さらに追加 */
.modal {
    flex-direction: column; /* 横並びを縦に */
    align-items: end; /* 「×ボタン」を真ん中から右に */
}


しかしこれですと、「テキストエリアの高さ>画面の高さ」となった場合にテキストエリアの位置を真ん中に維持できず、前提をクリアできませんでした。

さらに思いついたのが、テキストエリアの位置を真ん中に置くために使っている「flex」プロパティを「transform」プロパティに変更することです。(ボタンには引き続き先と同様に「sticky」を設定します)

/* 該当のCSSからflexプロパティを削除 */
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    z-index: 100;
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    overflow: hidden scroll;
    background: green;
}

/*該当のCSSに以下を追加*/
.outer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}
.close_modal {
    position: sticky; 
}
.close_modal > button {
    position: absolute;
    right: 0;
}


ですが、こちらも「flex-direction: column;」のときと同様で、「テキストエリアの高さ>画面の高さ」となった場合にテキストエリアの位置を真ん中に維持できず、前提をクリアできませんでした。

以上が解決のために考え試してきた流れになります。

CSSへの造詣が深い方からのアドバイスを頂けましたら幸いです。
ご指導宜しくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

flex-direction プロパティを column に設定したうえで sticky を使用することで、質問者さんの実現したい動作が可能だと思います (動作確認用リンク)。

<div class="modal">
    <div class="close_modal">
      <button type="button"></button>
    </div>
    <div class="outer">
      <div class="inner">
         <div class="editable" contenteditable="true"></div>
      </div>
    </div>
</div>
.modal {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100vw;
    z-index: 100;
    display: flex;
    flex-direction: column; /* 追加 */
    overflow: hidden scroll;
    background: green;
}
.close_modal {
    position: sticky; /* 変更 */
    top: 0;
    height: 0; /* 追加 */
    text-align: right; /* 追加 */
}
.outer {
    position: relative;
    width: 200px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto; 
}
.inner {
    width: 200px;
    min-height: 100px;
    padding: 50px 0;
    margin: 0 auto;
}
.editable {
    width: 200px;
    min-height: 100px;
    background: palegreen;
    white-space: pre-wrap;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/12/06 06:11

    いつもながらお見事です。どうもありがとうございます。仰る通りでした。

    キャンセル

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

  • ただいまの回答率 87.60%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る