{"id":21269,"date":"2020-03-08T09:46:19","date_gmt":"2020-03-08T08:46:19","guid":{"rendered":"https:\/\/pi3g.com\/?p=21269"},"modified":"2020-03-08T09:46:19","modified_gmt":"2020-03-08T08:46:19","slug":"fixing-z-index-for-v-menu-and-v-list-how-to-make-a-menu-overlap-your-content-in-vuetify","status":"publish","type":"post","link":"https:\/\/pi3g.com\/de\/fixing-z-index-for-v-menu-and-v-list-how-to-make-a-menu-overlap-your-content-in-vuetify\/","title":{"rendered":"Fixierung des z-index f\u00fcr v-menu und v-list: wie man ein Men\u00fc in vuetify \u00fcber den Inhalt legen kann"},"content":{"rendered":"

Ich habe das folgende Men\u00fc eingerichtet, und ich denke, Sie k\u00f6nnen das Problem sofort erkennen:<\/p>\n

\"Bild\"<\/a><\/p>\n

Wie Sie vielleicht sehen k\u00f6nnen, habe ich eine V-App-Leiste, die das Men\u00fc enth\u00e4lt, und einen Hauptinhaltsbereich.<\/p>\n

Das v-Men\u00fc wird von der v-Karte im Inhalt der Seite \u00fcberlagert. <\/p>\n

Der Versuch, die z-index-Eigenschaft von v-menu zu setzen, hat nicht <\/strong>helfen.<\/p>\n

\"Bild\"<\/a><\/p>\n

Einige Nachforschungen ergaben interessante Informationen, die ich \u00fcber z-index nicht kannte: einige Objekte verhalten sich unterschiedlich, es gibt verschiedene z-index-Stapel, die nicht miteinander verbunden sind, usw.<\/p>\n

Ich empfehle diese ausgezeichnete Einf\u00fchrung in Dinge, die Sie \u00fcber z-index wissen sollten<\/a> .<\/p>\n

L\u00f6sung:<\/h1>\n

Die L\u00f6sung<\/h3>\n

Sie m\u00fcssen einen Stil in der v-app-bar festlegen. z-index reicht nicht aus, Sie m\u00fcssen auch einen Position: relativ<\/strong> damit sie korrekt wiedergegeben werden kann:<\/p>\n

\n

<v-app-bar fluid color=”white” elevation=”2″ style=”position: relative; z-index: 3″><\/p>\n<\/blockquote>\n

\"Bild\"<\/a><\/p>\n

nach der Korrektur \u00fcberlappt das Men\u00fc nun die V-Karte im Hauptinhalt - so wie es der Benutzer erwartet, der das Men\u00fc benutzen m\u00f6chte.<\/p>\n

Der vollst\u00e4ndige Aufschlag (gek\u00fcrzt)<\/h3>\n
\n

<template>
     <div class="”box" box-default” style="”z-index:2″">
     <v-app>
       <v-content >
         <v-container fluid>
       <v-app-bar fluid color=”white” elevation=”2″ style=”position: relative; z-index: 3″>
         <v-container>
           <v-row>
           ...
          <v-spacer><\/v-spacer>
     <v-menu attach offset-y transition=”v-scale-transition”>
       <template v-slot:activator=”{ on }”>
         <v-btn
           klein
           color=\"primary\"
           v-on=\"on\"
           Text
         >
         fa fa-bars
           Aktionen
         <\/v-btn>
       <\/template>
       <v-list dense>
       ...
         <v-list-item :to=”{ name: ‘Help’ }”>
           fa fa-question-circleHilfe
         <\/v-list-item>
       <\/v-list>
       <v-divider class=”my-0″><\/v-divider>
       ...
     <\/v-menu>
     <\/v-row>
     ...
     <\/v-container>
     <\/v-app-bar>
           <router-view><\/router-view>
         <\/v-container>
       <\/v-content>
     <\/v-app>
     <\/div>
\n<\/template><\/p>\n<\/blockquote>\n

Anmerkung: der Hauptinhalt wird in der Router-Ansicht gerendert (ich verwende vue-router f\u00fcr die kommenden picockpit<\/a> Version). \n<\/p>\n

Wie habe ich diese L\u00f6sung gefunden?<\/h3>\n

Ich habe die DevTools von Google Chrome verwendet und bin manuell durch die einzelnen Wrapping-Elemente gegangen, wobei ich den z-Index eingestellt und mit verschiedenen Positionen experimentiert habe, bis ich das richtige Element gefunden hatte, auf das ich es anwenden wollte.<\/p>\n

Dann ging ich in das Markup von Vue und wandte den Stil \"background-color:red\" an und pr\u00fcfte, ob ich das richtige Element gefunden hatte. <\/p>\n

Ich habe versucht, eine z-index-Eigenschaft auf das Vue-Element zu setzen, das ich identifiziert habe (v-app-bar<\/strong> die in

gerendert wird), dies wurde jedoch nicht korrekt gerendert. Daher habe ich den z-index direkt in der Formatvorlage gesetzt, dieser wird korrekt angewendet.<\/p>\n

Referenzen:<\/h1>\n