4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vuetifyで最上面に表示する

Last updated at Posted at 2020-12-05

Vuetifyで要素を最上面に表示したい

重なり順のお話

アラート表示が「v-overlay」の下に...

めちゃくちゃ頑張ってアラート機能を作りましたが,画像のように「v-dialog」の「v-overlay」の下に,,,
因みにこのアラートは「App.vue」に記載して「z-index」は99にしてました.
image.png

z-indexを999にして解決

取り敢えず適当に「z-index」を999にしたら解決.
おおー!!
image.png

「v-overlay」の「z-index」は201

Chromeのデバッグ機能で覗いた感じ,どうやら「v-overlay」の「z-index」は201っぽい.
これが固定なのか動的に定められているのかはわかりませんが,,,
ま,取り敢えず202にしたら解決

「z-index」はどこまで??

これまで「z-index」は99が最大と思ってました.
いやいやVuetifyがルール破るはずがない
この際調べてみたところ,最大値は「2147483647」とか
こりゃもう一時安心,,,
まあ,ブラウザとかによるとも思うので参考まで

ではでは~
あ,因みに私これが多分初記事です
よろしゅうに

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?