liebewinter: hintengrund Button wird gezeigt

hallo, ich versuche eine E-commerce Webseite zu baue...

Mein Probleme ist wenn klicken der Zum warenkorb hinzufügen Button und das Fenster wird öffnet auf die zeichnen + und -, sie werden gezeigt...

Wie sie wird gezeigt

wie das fenster wird gezeigt

Wenn der neue Fenster bewegt nach rechte Seite mit

#layerPreviewContent-3 {position:absolute;z-index:1;display:none;background-color:#dedee0; margin-top: 0px;left:50%;
					width:30%;
					margin-left:-150px;
					height:40%;
                    
                    -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
					-webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
                    box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
                    
                    
}

mit margin-left:-450px; bewegt Ein Bissen nach dem Rechte Seite

wie das fenster wird  nach recht bewegt

...und wie euch können sehen, die Zeichnung verschwinden...

Meine frage, wie kann verhindert wenn das neue fenster auf der zeichnung wird öffnet, die zeichnung + und - werden nicht gezeigt..

Hier wie have ganze code.

akzeptierte Antworten

  1. Das + und das - gehören offenbar als Steuerungselemente zu einem Input (Type=number)

    Solche Steuerungselemente und mit z-index positionierte Elemente sind oft keine Feunde, weil viele Browser unter manchen Betriebssystem diese Steuerelemente immer ganz oben anzeigen.

    Einzige mir(*) einfallende Lösung:

    Input (Type=text, pattern=[0-9]{1,3} (1 bis 3 Ziffern) + 2 Buttons (+, -)+ Javascript welches den Wert im Input erhöht oder erniedrigt.

    *) Womöglich hat jemand, der mehr UX/GUI macht, eine bessere Idee.

  2. Deine +, - Buttons haben einen z-index von 3. Der "Layer" mit dem Rucksack hat einen z-index von 1.

    Da muss Du Dich nicht wundern, wenn die Buttons über dem Layer sichtbar werden.

    z-index

    Hinzu kommt: Input type=number --- oder diese beiden Buttons. Du musst Dich entscheiden. Wenn der Input mit den Steuerelementen für das Erhöhen und Erniedrigen des Inhalts gezeigt wird, dann sieht es sehr merkwürdig aus, wenn es davon mehrere gibt.

    Korrigiere also die Angaben für den z-index und beachte meine Ausführungen zum Input in meiner anderen Antwort.

    1. Danke für deinen antwort, aber Gestern habe auf andere Forum gefragt und haben eine losung gegeben. Die Losung war in #layerPreviewContent-3 auf z-index einem Große Nummer geben, ich habe 9999 gegeben...

      #layerPreviewContent-3 {
          position: absolute;
          /*CHANGE Z-INDEX TO A BIG NUMBER*/
          z-index: 9999;
          display: none;
          background-color: #dedee0;
          margin-top: 0px;
          left: 50%;
          width: 30%;
          margin-left: -150px;
          height: 40%;
          -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
          -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
          box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
      }
      

      wie sie aussiehst ...

      1. Danke für deinen antwort, aber Gestern habe auf andere Forum gefragt und haben eine losung gegeben.

        Tja. Ich habe Dir das Problem genannt.

        z-index … ich habe 9999 gegeben

        Ich bin gespannt, wie lange das hilft und welche Probleme nun dadurch entstehen. Dein eigentliches Problem ist, dass Du irgendwelche „Lösungen“ aus verschiedenen Foren anwendest und dabei überhaupt nicht weißt, was Du tust - weil Du Dich damit auch nicht befasst. Die Frage ist nämlich schon die, warum (zum Teufel!) Du den +/- Buttons überhaupt einen z-index gibst. Der ist zu nichts gut, außer das Problem zu verursachen und natürlich taugt das Ganze vor allem dazu, als schlechtes Beispiel zu herzuhalten.

        eine E-commerce Webseite

        Das kann nur schlecht ausgehen.

      2. Hallo,

        Danke für deinen antwort, aber Gestern habe auf andere Forum gefragt und haben eine losung gegeben.

        Hältst du es für nett gleichzeitig woanders auch noch zu fragen ohne wenigstens darauf hinzuweisen? Nicht umsonst sind Doppel-/Crosspostings nicht erwünscht.

        Gruß,
        Tobias

    2. @@Raketenbedienpultschrauber

      Hinzu kommt: Input type=number --- oder diese beiden Buttons. Du musst Dich entscheiden. Wenn der Input mit den Steuerelementen für das Erhöhen und Erniedrigen des Inhalts gezeigt wird, dann sieht es sehr merkwürdig aus, wenn es davon mehrere gibt.

      Man kann auch <input type="number"> verwenden (also dessen Vorteile nutzen) und die nativen 🔼/🔽-Schalter mit CSS ausblenden.

      🖖 Stay hard! Stay hungry! Stay alive! Stay home!

      --
      Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (@Grantscheam)
      1. Hallo Gunnar,

        Du meinst sicherlich dieses Snipplet:

        input[type=number]::-webkit-outer-spin-button,
        input[type=number]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        
        input[type=number] {
            -moz-appearance:textfield;
        }
        

        Meine Frage dazu: Ist es denn inzwischen wieder „unverpönt“ in "Nichttestversionen" diese Browserpräfixe (-moz, -webkit) zu verwenden?

        1. Hallo Raketenbedienpultschrauber,

          Meine Frage dazu: Ist es denn inzwischen wieder „unverpönt“ in "Nichttestversionen" diese Browserpräfixe (-moz, -webkit) zu verwenden?

          Es war nie verpönt, imho.

          Bis demnächst
          Matthias

          --
          Du kannst das Projekt SELFHTML unterstützen,
          indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
          1. imho

            Ah! Die Diskussion um die Verwendbarkeit der Browserpräfixe entsprang also einem Meinungskonflikt zwischen „Akademikern“ und „Praktikern“ bei dem man sich als „Webdesigner“ situationsangemessen zwischen den Extremen bewegen kann?

            1. hier sprecht was du mir gesagst hast...ich versuche implementiert in meinen Code, aber ist Ein bissen schwieriger...

            2. Hallo Raketenphilosoph,

              Ah! Die Diskussion um die Verwendbarkeit der Browserpräfixe entsprang also einem Meinungskonflikt zwischen „Akademikern“ und „Praktikern“ bei dem man sich als „Webdesigner“ situationsangemessen zwischen den Extremen bewegen kann?

              Es ist progressive enhancement.

              Bis demnächst
              Matthias

              --
              Du kannst das Projekt SELFHTML unterstützen,
              indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.