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

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

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

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

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

###該当のCSS
上の画像のコードは下記です。

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

HTMl
1<div class="modal">
2    <div class="close_modal">
3      <button type="button">✕</button>
4    </div>
5    <div class="outer">
6      <div class="inner">
7         <div class="editable" contenteditable="true"></div>
8      </div>
9    </div>
10</div>

CSS
1.modal {
2    position: fixed;
3    top: 0; right: 0; bottom: 0; left: 0;
4    width: 100vw;
5    z-index: 100;
6    display: flex;
7    align-items: center;	    
8    justify-content: center;
9    overflow: hidden scroll;
10    background: green;
11}
12.close_modal {
13    position: absolute;
14    top: 0;
15    right: 0;
16}
17.outer {
18    position: relative;
19    width: 200px;
20    padding: 0 10px;
21    display: flex;
22    align-items: center;
23    justify-content: center;
24    margin: auto; 
25}
26.inner {
27    width: 200px;
28    min-height: 100px;
29    padding: 50px 0;
30    margin: 0 auto;
31}
32.editable {
33    width: 200px;
34    min-height: 100px;
35    background: palegreen;
36    white-space: pre-wrap;
37}
38

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

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

css
1/* 該当のCSSに追加 */
2.close_modal {
3    position: sticky; 
4}
5.close_modal > button {
6    position: absolute;
7    right: 0;
8}

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

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

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

さらに思いついたのが、テキストエリアの位置を真ん中に置くために使っている「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への造詣が深い方からのアドバイスを頂けましたら幸いです。
ご指導宜しくお願い致します。

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

回答1件

ベストアンサー

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

HTML
1<div class="modal">
2    <div class="close_modal">
3      <button type="button">✕</button>
4    </div>
5    <div class="outer">
6      <div class="inner">
7         <div class="editable" contenteditable="true"></div>
8      </div>
9    </div>
10</div>

CSS
1.modal {
2    position: fixed;
3    top: 0; right: 0; bottom: 0; left: 0;
4    width: 100vw;
5    z-index: 100;
6    display: flex;
7    flex-direction: column; /* 追加 */
8    overflow: hidden scroll;
9    background: green;
10}
11.close_modal {
12    position: sticky; /* 変更 */
13    top: 0;
14    height: 0; /* 追加 */
15    text-align: right; /* 追加 */
16}
17.outer {
18    position: relative;
19    width: 200px;
20    padding: 0 10px;
21    display: flex;
22    align-items: center;
23    justify-content: center;
24    margin: auto; 
25}
26.inner {
27    width: 200px;
28    min-height: 100px;
29    padding: 50px 0;
30    margin: 0 auto;
31}
32.editable {
33    width: 200px;
34    min-height: 100px;
35    background: palegreen;
36    white-space: pre-wrap;
37}