formと要素が重なってうまくいかないときの小技

小技、というかcssひとつで解決するんですけどね。

要素に以下をつける

pointer-events:none;

なにをするか一言でいうと、要素が選択範囲内にきてもなにもしないよって感じ。

before要素とかでゴチャゴチャ装飾したてformと重なるオシャレなデザインを作ってみたはいいが、いざカーソルを当てるとフォームを選択できない。

さらにz-indexを指定してもうまくいかなかった。ということでこの方法で解決しました。