前人未踏の領域へ WEB・インフラ・プログラミング全般編

フロントエンド、バックエンド、インフラ、言語など、アプリ開発、IOT以外の記録

CSS display: flexにしたら内部コンテンツの一部のスタイルが反映されなくなった

課題

親の要素を display: flex に変更したところ、子要素に定義していた :hover とVueJsのclickイベントが発生しなくなった。

原因

子のdivタグに z-index: -1 が指定してあったため。

.data-area {
  z-index: -1;
}

対応

作るサイトによると思うけど0にしたらちゃんと表示された。

.data-area {
  z-index: 0;
}

あまり調べてないけど -1は特別な挙動になるらしい。

参考

developer.mozilla.org stackoverflow.com

/* Responsive: yes */