Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „[css] Z-Index auf Bilder“

mtl

Suppenkasper

Folgendes: Ich möchte einem <div> abgerundete Ecken verpassen. Dies realisiere ich mit halb-transparenten png's in den Ecken (vier verschachtelte divs mit jeweils einem ecken-png). Das positionieren klappt soweit ganz gut, solange ich nur mit transparentem BG und text arbeite (in der untersten <div>). Sobald ich ein Bild oder eine BG-Farbe einfügen will, setzt sich dieses immer über die Eck-Grafiken, was das ganze natürlich nutzlos macht.
Also setze ich einen z-index wert. Doch obwohl die Eck-Grafiken einen niedrigeren z-index wert haben als das Bild, sind sie hinter- anstatt vor dem Bild.

Hier mal der Code:
Code:
<style type="text/css">
.tl {
    background:url(img/mask_tl.png) top left no-repeat; z-index:100;
    }

.tr {
    background:url(img/mask_tr.png) top right no-repeat; z-index:101;
    }

.bl {
    background:url(img/mask_bl.png) bottom left no-repeat; z-index:102;
     }

.br {
    background:url(img/mask_br.png) bottom right no-repeat; z-index:103;
     }

.back { z-index:200;}
</style>
und:

HTML:
<div style="width:900px; height:auto;">
    <div class="tl">
      <div class="tr">
        <div class="bl">
          <div class="br">
            <div class="back"><img src="img/slide-1.png" /></div>
          </div>
        </div>
      </div>
    </div>
</div>

Hat jemand eine Ahnung warum das nicht so läuft wie ich mir das wünsche?

Danke und Gruss
Maurus
 

Zampano_

Nicht mehr ganz neu hier

AW: [css] Z-Index auf Bilder

Joa, so soll's ja auch sein. Der höchste z-index liegt ganz oben, der niedrigste ganz unten :)
 
Zuletzt bearbeitet:

mtl

Suppenkasper

AW: [css] Z-Index auf Bilder

Das hatte ich zu anfangs auch so, später habe ich das dann mal aus purer Verzweiflung umgekehrt.

Inzwischen habe ich das Problem aber erkannt. Natürlich musste ich zuerst x-Stunden Probieren bis ich mich dann ans Forum wende. Kaum habe ich das getan, fällt einem die Lösung selbst ein.

Das Problem war das hier:
HTML:
background:url(img/mask_tl.png) top left no-repeat;

Die Positionierung und das Repetieren muss separat ausgeschrieben werden. So:
HTML:
.tl
	{
		background-image:url(../img/corner_tl.png);
		background-repeat:no-repeat;
		background-position:top left;
		width:590px;
		height:190px;
		padding:0;
		margin:0;
	}

Danke trotzdem für Deine Hilfe :)
 

sokie

Mod | Web

AW: [css] Z-Index auf Bilder

mit dem z-index kannst du die Stapereihenfolge der elemente auf gleicher ebene beeinflussen. hier stapelsdt du aber keine Elemente, sondern schachtelst sie ineinander.
wenn du nun ein Hintergrundbild haben willst musst du es in den ersten container setzen, bevor du die anderen hineinschachtelst.
HTML:
<div style="background: url(img/slide-1.png)top left no-repeat">
     <div class="tl">
       <div class="tr">        
           <div class="bl">
             <div class="br">             hier die Inhalte           
             </div>
         </div>
       </div>
     </div>
</div>
 
Zuletzt bearbeitet:

mtl

Suppenkasper

AW: [css] Z-Index auf Bilder

Ach, das macht natürlich Sinn, ja. So funktioniert das ja lediglich für Bilder, richtig?
Ich gehe mal einen Schritt weiter weil ich daran denke, anstelle eines Bildes per PHP-include ein weiteres php dokument zu importieren (da wird man dann irgendwelche knöpfe drücken können, oder sonstige html/css Elemente vorfinden).
Jetzt kann ich die Eck-Divs per se ja nicht über das include-php legen ausser ich reisse die eck-divs per positions-tag aus dem fluss, richtig?
 

sokie

Mod | Web

AW: [css] Z-Index auf Bilder

die Dinge die du über php includen willst werden ja ohnehin inhalte sein, und die liegen ja nicht unter den Divs, sondern im inneren div .br (wo ich das auch schon per "hier die Inhalte" bezeichnet habe).
So eingefügte inhalte verlängern natürlich die gesamte box - die positionen der background-bilder (corner) passen sich aber entsprechend an.
 

mtl

Suppenkasper

AW: [css] Z-Index auf Bilder

Alles klar, ich probier das dann aus und melde mich gegebenenfalls hier nochmals.

Danke für Deine Hilfe!
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.158
Beiträge
2.581.880
Mitglieder
67.225
Neuestes Mitglied
Petra
Oben