【CSS】要素の相対位置、絶対位置について

まず以下のhtmlがあるとする

<!DOCTYPE html>
<html>
<head>
    <title>相対位置・絶対位置</title>
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
</head>
<style>
    .container {
        width: 400px; /* テキストボックスの幅 */
        height: 40px; /* テキストボックスの高さ */
        border: 2px solid red;
    }
</style>
<body>
    <div class="container">
    </div>
    <script>
        $(document).ready(function() {
       });
    </script>
</body>
</html>

このような矩形が出力される。

この矩形の右端に逆三角形の文字(▼)を表示したい。

cssをこのように設定する。

    .container {
        position: relative;
        width: 400px; /* テキストボックスの幅 */
        height: 40px; /* テキストボックスの高さ */
        border: 2px solid red;
    }
    .container::before {
        content: "▼"; /* 逆三角のマーク */
        position: absolute;
        top: 50%;
        right: 10px; /* テキストボックスの右端からの距離 */
        transform: translateY(-50%);
        pointer-events: none;
        color: #000;
        font-size: 14px;
    }

結果はこうなる

簡単に解説すると、

 .container {
        position: relative;
        width: 400px; /* テキストボックスの幅 */
        height: 40px; /* テキストボックスの高さ */
        border: 2px solid red;
    }

position: relative;: 要素の位置を相対的に指定する。この場合、テキストボックス内の子要素に対して位置を調整するために使用する。

.container::after {
        content: "▼"; /* 逆三角のマーク */
        position: absolute;
        top: 50%;
        right: 10px; /* テキストボックスの右端からの距離 */
        transform: translateY(-50%);
        pointer-events: none;
        color: #000;
        font-size: 14px;
    }

.container::before: ::before 疑似要素。これは .container 要素の後に挿入される仮想の要素。
content: "▼";: 疑似要素に表示する内容を指定する。ここでは逆三角のマーク “▼” を表示。
position: absolute;: 疑似要素の位置を絶対位置に設定する。親要素である .container に対して相対的な位置調整を行う。
top: 50%;: 疑似要素を垂直方向に中央揃えにする。
right: 10px;: テキストボックスの右端からの距離を10ピクセルに設定。
transform: translateY(-50%);: 垂直方向に中央揃えにした後、疑似要素を上に50%移動させて垂直方向に正確に中央揃えにする。
pointer-events: none;: 疑似要素はマウスイベントをキャッチしないようにする。これにより、テキストボックスがクリック可能なままであることが保たれる。
color: #000;: 疑似要素の文字色を黒に設定する。
font-size: 14px;: 疑似要素のフォントサイズを14ピクセルに設定する。

position: relative と position: absolute; はセットで使うことが多い。

`position: relative`　と　position: absolute;　はセットで使うことが多い。