CSSのpositionを理解してなくて、clickイベントを取得できず悩んでいた。

以下のようなhtmlとcssがあったときに、clickをとりたいdivでclickイベントをが発生しなくて悩んでた。

<div class="content">
    <div>clickをとりたい</div>
</div>

.content {
    position: relative;
}

.content::before {
    position: absolute;
    width: 100%;
    height: 100%;
}

これはcontent::beforeで、Pseudo-elementを作成して、 それがcontentを覆っている。 その後にclickを取得したいdivが続いている。

positionを指定してないdomとpositionを指定してるdomでは、positionが指定された方が上の要素になるようで(参照)、 clickイベントがcontent::beforeによって防がれていた。(pseudo-elementはclickイベントを取得できないみたいだけど..）

なので、取得したいdomにpositionをつけると、新しく出てきたdomが上に来るのでイベントを取れるようになる。 または、pointer-events: none;をcontent::beforeに設定してもよい。

すごい参考になった記事 -> https://ics.media/entry/200609/