[CSS]擬似要素に対してposition:relativeを指定できない理由

Question

前提・実現したいこと

CSSにて擬似要素でboxを作成し、そのboxを基準（position:relative）として子要素の位置を相対的に決定したいです。
擬似要素にposition:relativeを指定しているのですが、効かない状況です。
擬似要素にposition:relativeは指定できないのでしょうか。
できない場合、その理由も含めて教えていただきたいです。

また、後述の”試したこと”に記載した通り、擬似要素を当てているクラス自体にposition:relativeを指定したら、擬似要素として作成したboxを基準として子要素の位置を決定できました。
こちら何故できたのかわからないので教えていただきたいです。

よろしくお願いいたします。

該当のソースコード

.top_wrapper  {
    background-color: red;
}

.top_wrapper:before {
    content: "";
    display: block;
    background-color: gray;
    padding-top: 50%;
    position: relative;
}
.top_left {
    position: absolute;
    top: 150px;
}

                <div class="top_wrapper">
                    <div class="container"> 
                        <div class="top_left">
                            <h1 class="top_message">身近な旅、新しい旅。</h1>
                            <div class="top_btn">近場の宿泊先を探す</div>
                        </div>
                    </div>
                </div>

試したこと

CSSを以下のように変更（擬似要素を当てているクラス自体にposition:relativeを指定）したらできました。

.top_wrapper  {
    background-color: red;
    position: relative;
}

.top_wrapper:before {
    content: "";
    display: block;
    background-color: gray;
    padding-top: 50%;
    
}
.top_left {
    position: absolute;
    top: 150px;
}

Comments

[int32_t]

.top_left の座標の基準を.top_wrapper::beforeにしたかった、という理解でよいですか?

[m.ts10806]

理由は「仕様」になるのでは。
やりたい事ができないならできる方法を模索する方向に質問かえられたほうが良いかと

[HirotakaKOBORI]

＞int32_tさん
仰る通りです。

＞m.ts10806さん
仕様ですね。できる方法は”試したこと”に記載をしています。

Answer 1

CSSにて擬似要素でboxを作成し、そのboxを基準（position:relative）として子要素の位置を相対的に決定したいです。

ご自身が上記のように書いている通り、子要素(正確には子孫要素)からみて基準になるものを指定するものです。
疑似要素は子要素を持つことができないので、指定しても意味がないです。

.top_left は .top_wrapper:before の子孫要素ではないので効かない。
.top_wrapper は子孫要素なので効く。
ということです。

Comments

[HirotakaKOBORI]

ご回答ありがとうございます。

＞.top_left は .top_wrapper:before の子孫要素ではないので効かない。
＞.top_wrapper は子孫要素なので効く。
こちら理解できました。ありがとうございます。

追加で質問があります。
.top_left は、.top_wrapperの子孫要素なので効くというのは分かりましたが、
一方で、.top_wrapper にposition:relativeを指定すると、基準となるのは.top_wrapperではなく、.top_wrapper:beforeでした。

親子関係を考えたときに.top_wrapperが基準となると思ったのですが、何故でしょうか。

[hatena19]

提示のHTMLとCSSだと、.top_wrapper と .top_wrapper:before の位置、サイズは同じになりますので、.top_wrapper:before 基準のように見えますが、実際は .top_wrapper 基準です。

例えば、下記のように transform で下に100px移動させてみてください。
.top_wrapper::before {
transform: translatey(100px);
}

::before疑似要素は100px下に移動しますが、.top_left は移動しません。

[HirotakaKOBORI]

うわー！ありがとうございます。疑問解消しました！
ご親切にどうもありがとうございました。