1. Zuhause
  2. Frage und Antwort
  3. Sollte SVG wirklich diesen Dialog überlagern?

Sollte SVG wirklich diesen Dialog überlagern?

2016-07-20 22 views
0

ein SVG-Tag überlagert die folgende Snippets-Box, obwohl es weniger z-index als die Box gegeben ist.Sollte SVG wirklich diesen Dialog überlagern?

Snippet:

.nicebox_overlay { width: 100%; height: 100%; z-index: 1; display: table; text-align: center; background: rgba(0,0,0,.1); } 
 
.nicebox_container { display: table-cell; vertical-align: middle; } 
 
.nicebox_content { display: inline-block; text-align: left; background: #EEE; min-height: 250px; min-width: 250px; position: relative; margin: 16px; } 
 
.nicebox_inner_content { z-index: 600; color: white; padding: 8px; box-sizing: border-box; } 
 
.nicebox_svg_tleft { position: absolute; top: -10px; left: -10px; z-index: 1; } 
 
.nicebox_svg_bright { position: absolute; bottom: -10px; right: -10px; transform: rotate(180deg); z-index: 1; }
<div class="nicebox_overlay"> 
 
      <div class="nicebox_container"> 
 
       <div class="nicebox_content"> 
 
        <div class="nicebox_svg_tleft"> 
 
         <svg> 
 
          <rect x="8px" y="8px" width="2px" height="200px" style="fill: #A22;" /> 
 
          <rect x="8px" y="8px" height="2px" width="180px" style="fill: #A22;" /> 
 
         </svg> 
 
        </div> 
 
        <div class="nicebox_inner_content"> 
 
         <textarea style="width: 240px; height: 240px">Try and enter something here...</textarea> 
 
        </div> 
 
        <div class="nicebox_svg_bright"> 
 
         <svg> 
 
          <rect x="8px" y="8px" width="2px" height="200px" style="fill: #A22;" /> 
 
          <rect x="8px" y="8px" height="2px" width="180px" style="fill: #A22;" /> 
 
         </svg> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div>

Ich will nur einfach die SVGs in den Rücken und das Textfeld im Snippet sein editierbar sein.

Jede Hilfe wird geschätzt.

PS: Ich muss position: static für die .nicebox_inner_content Klasse verwenden.

EDIT: Mit z-index: -1 funktioniert, aber es verbirgt sich die ganze SVG Element zurück hinter dem body-Tag.

EDIT mkII: Ich kann auch andere position s verwenden, solange sie mit den inneren Elementen automatisch skalieren, weil diese Box flexibel sein muss.

EDIT mkIII: Die Website: https://www.forcemagic.xyz/_ptExp!542/ Das Snippet ist eine vereinfachte und neu eingefärbte Version der ursprünglichen Website.

Quelle

2016-07-20 ForceMagic

+0

Können Sie die UI-Screenshot teilen, was genau Sie suchen? –

+0

Ich möchte nur das innere Textfeld bearbeiten, das ist alles. Und auch die SVGs sollen sichtbar sein. Die Benutzeroberfläche ist dieselbe wie im Snippet. – ForceMagic

+0

Okay gut, ich werde es überprüfen. –

Antwort

2

Dieses angepasste Snippet sollte Ihre Anforderungen erfüllen, sieht genauso aus wie Ihr erstes Snippet, aber textarea ist verwendbar.

.nicebox_overlay { width: 100%; height: 100%; z-index: 1; display: table; text-align: center; background: rgba(0,0,0,.1); } 
 
.nicebox_container { display: table-cell; vertical-align: middle; } 
 
.nicebox_content { display: inline-block; text-align: left; background: #EEE; min-height: 250px; min-width: 250px; position: relative; margin: 16px; } 
 
.nicebox_inner_content { z-index: 600; color: white; padding: 8px; box-sizing: border-box; } 
 
.nicebox_svg_tleft { position: absolute; top: -10px; left: -10px; z-index: -1; } 
 
.nicebox_svg_bright { position: absolute; bottom: -10px; right: -10px; transform: rotate(180deg); z-index: -1; }
<div class="nicebox_overlay"> 
 
      <div class="nicebox_container"> 
 
       <div class="nicebox_content"> 
 
        <div class="nicebox_svg_tleft"> 
 
         <svg> 
 
          <rect x="8px" y="8px" width="2px" height="200px" style="fill: #EEE;" /> 
 
          <rect x="8px" y="8px" height="2px" width="180px" style="fill: #EEE;" /> 
 
         </svg> 
 
        </div> 
 
        <div class="nicebox_inner_content"> 
 
         <textarea style="width: 240px; height: 240px">Try and enter something here...</textarea> 
 
        </div> 
 
        <div class="nicebox_svg_bright"> 
 
         <svg> 
 
          <rect x="8px" y="8px" width="2px" height="200px" style="fill: #EEE;" /> 
 
          <rect x="8px" y="8px" height="2px" width="180px" style="fill: #EEE;" /> 
 
         </svg> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div>

Quelle

2016-07-20 10:19:01

+0

Das ist in Ordnung, aber dieser Ausschnitt in Aktion verbirgt die SVGs. (Für mich zumindest) Schau dir den Screenshot von [original] (http://imgur.com/a/qcrwn) und [modified] (https://imgur.com/a/T6D71) von der eigentlichen Webseite an, die ich möchte um das zu benutzen. (Ich weiß, die Farben und der Inhalt sind nicht wirklich die gleichen, aber glauben Sie mir, das Rückgrat ist das gleiche. – ForceMagic

+0

also sollten Sie die gesamte Codebasis in einer Geige hinzufügen oder die Website mit der Login-Box verknüpfen. Es muss etwas anderes sein, wie es in meinem Schnipsel oben funktioniert, wenn Sie es ausführen –

+0

Ich wollte nicht wirklich zuerst, aber hier ist es: https://www.forcemagic.xyz/_ptExp!542/ – ForceMagic

0

Hinzufügen von unerwünschten "z-index" Sie können dies einfach erreichen:

Gerade habe ich hinzugefügt z-Index nur zwei Klassen.

.nicebox_content (
    z-index: 0; 
} 
.nicebox_inner_content (
    z-index: 1; 
}

Hier mein Code vorschlagen:

.nicebox_overlay { position: relative; width: 100%; height: 100%;display: table; text-align: center; background: rgba(0,0,0,.1); } 
 
.nicebox_container { display: table-cell; vertical-align: middle; } 
 
.nicebox_content { display: inline-block; text-align: left; background: #EEE; min-height: 250px; min-width: 250px; position: relative; margin: 16px; z-index:0;} 
 
.nicebox_inner_content { position: absolute; left:0; right:0; top: 15px; color: white; padding: 8px; box-sizing: border-box; z-index:1; } 
 
.nicebox_svg_tleft { position: absolute; top: -10px; left: -10px; } 
 
.nicebox_svg_bright { position: absolute; bottom: -10px; right: -10px; transform: rotate(180deg); }
<div class="nicebox_overlay"> 
 
\t <div class="nicebox_inner_content"> 
 
\t \t <textarea style="width: 230px; height: 230px">Try and enter something here...</textarea> 
 
\t </div> 
 
\t <div class="nicebox_container"> 
 
\t \t <div class="nicebox_content"> 
 
\t \t \t <div class="nicebox_svg_tleft"> 
 
\t \t \t \t <svg> 
 
\t \t \t \t \t <rect x="8px" y="8px" width="2px" height="200px" style="fill: #A22;" /> 
 
\t \t \t \t \t <rect x="8px" y="8px" height="2px" width="180px" style="fill: #A22;" /> 
 
\t \t \t \t </svg> 
 
\t \t \t </div> 
 
\t \t \t <div class="nicebox_svg_bright"> 
 
\t \t \t \t <svg> 
 
\t \t \t \t \t <rect x="8px" y="8px" width="2px" height="200px" style="fill: #A22;" /> 
 
\t \t \t \t \t <rect x="8px" y="8px" height="2px" width="180px" style="fill: #A22;" /> 
 
\t \t \t \t </svg> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

Quelle

2016-07-20 10:37:10

+0

Wohin sind die SVGs gegangen? – ForceMagic

+0

SVG sind da bitte überprüfen Sie meinen Code deutlich. –

+0

Aber sie sind nicht sichtbar. Sehen Sie sich mein aktuelles Snippet an. Wie Sie sehen können, sind die SVGs rot, so dass die Leute bemerken können, dass ich es dort will :) – ForceMagic

0

Ich denke, das ist das, was Sie wollen, pointer-events: none;

.nicebox_overlay { width: 100%; height: 100%; z-index: 1; display: table; text-align: center; background: rgba(0,0,0,.1); } 
 
.nicebox_container { display: table-cell; vertical-align: middle; } 
 
.nicebox_content { display: inline-block; text-align: left; background: #EEE; min-height: 250px; min-width: 250px; position: relative; margin: 16px; } 
 
.nicebox_inner_content { z-index: 600; color: white; padding: 8px; box-sizing: border-box; } 
 
.nicebox_svg_tleft { position: absolute; top: -10px; left: -10px; z-index: 1; pointer-events: none;} 
 
.nicebox_svg_bright { position: absolute; bottom: -10px; right: -10px; transform: rotate(180deg); z-index: 1; pointer-events: none;}
<div class="nicebox_overlay"> 
 
      <div class="nicebox_container"> 
 
       <div class="nicebox_content"> 
 
        <div class="nicebox_svg_tleft"> 
 
         <svg> 
 
          <rect x="8px" y="8px" width="2px" height="200px" style="fill: #A22;" /> 
 
          <rect x="8px" y="8px" height="2px" width="180px" style="fill: #A22;" /> 
 
         </svg> 
 
        </div> 
 
        <div class="nicebox_inner_content"> 
 
         <textarea style="width: 240px; height: 240px">Try and enter something here...</textarea> 
 
        </div> 
 
        <div class="nicebox_svg_bright"> 
 
         <svg> 
 
          <rect x="8px" y="8px" width="2px" height="200px" style="fill: #A22;" /> 
 
          <rect x="8px" y="8px" height="2px" width="180px" style="fill: #A22;" /> 
 
         </svg> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div>

Quelle

2016-07-20 10:41:44 ristapk

+0

'pointer-events' sollte vermieden werden, da es nicht browserübergreifend ist –

+2

Eigentlich ist es ziemlich gut CSS Eigentum ... http://caniuse.com/#search=pointer-events – ristapk

 Verwandte Themen

  • Keine verwandten Themen^_^