[css] Z-Index auf Bilder

[mtl]

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:

<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:

<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_]

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

 

[mtl]

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:

background:url(img/mask_tl.png) top left no-repeat;

Die Positionierung und das Repetieren muss separat ausgeschrieben werden. So:

.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]

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.

<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>

 

[mtl]

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]

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]

AW: [css] Z-Index auf Bilder

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

Danke für Deine Hilfe!