Background und z-index?

[Loon3y]

Moinsen...


ich habe stehe momentan vor folgenden Problem:

Ich habe einen Farbverlauf den ich in die y-achse wiederhole. Dieser ist zum Teil transparent und soll ungefähr 50% des Contents verdecken.

ist es nun möglich, dem Element mit dem Background einen höheren z-index zu geben als dem Content und somit den Content zum Teil zu verbergen?

Anbei ein "Beispiel-Code":

css:

#main_right, { 
       width: 360px;
        height: 900px; 
       float:left; 
       position:relative; 
       margin-top:-10px; 
       z-index:10; 
       background: url(../img/fw/shadow_right.png) repeat-y; 
}
#main_right ul { 
       width:360px; 
       height:870px; 
       margin:50px auto 0px; 
}
#main_right ul li { 
       width:380px; 
       height:230px; 
       margin:0px 0px 10px; 
       background:url(../img/fw/box_standard.png); 
       position:relative; 
       z-index:1;  
}
#main_right ul li img { 
       width:300px; 
       height: 200px; 
       float:right; 
       margin:15px 16px; 
}

html:

<div id="main_right">
 <ul>
  <li><a href="#"><img src="#" width="300" height="200" alt="" /></a></li>
  <li><a href="#"><img src="#" width="300" height="200" alt="" /></a></li>
  <li><a href="#"><img src="#" width="300" height="200" alt="" /></a></li>
 </ul>
</div>

Gruß
Loon3y

Anmerkung 1: Warum zu 50% den inhalt verdecken? Ist nur eine Vorschau im Auswahlmenu

Anmerkung 2: Wieso <div> um <ul>? Weil noch mehr Inhalt rein kommt.

Anmerkung 3: Usability? Ist keine www-Anwendung im eigentlichen Sinne.

 

[Toastbrot]

Eigentlich sollte das gehen, ob es allerdings in deiner Variante geht, weiß ich nicht; kanns aber da ich ja das Bild nicht hab, auch nicht ausprobieren.

Versuch vielleicht, einfach die ul hinter den div zu stellen, falls deins nicht funktioniert.

Gruß
Toast

 

[Loon3y]

Eigentlich eigentlich eigentlich....solche Antworten bringen ehrlich gesagt nicht viel. Wünschenswerter wäre eine aussagekräftige Antwort.


Edit: Lösung - zumindest für mich in Opera 9.6x:

#main_right, { 
       width: 360px;
        height: 900px; 
       float:left; 
       position:relative; 
       margin-top:-10px; 
/*       z-index:10; <- [I]gelöscht[/I]*/ 
       background: url(../img/fw/shadow_right.png) repeat-y; 
[B]       background-z-index: +1; hinzugefügt[/B]
}
#main_right ul { 
       width:360px; 
       height:870px; 
       margin:50px auto 0px; 
}
#main_right ul li { 
       width:380px; 
       height:230px; 
       margin:0px 0px 10px; 
       background:url(../img/fw/box_standard.png); 
       position:relative; 
       z-index:1;  
}
#main_right ul li img { 
       width:300px; 
       height: 200px; 
       float:right; 
       margin:15px 16px; 
}

 

[_Thor_]

Ich hab noch nie wirklich mit z-index gearbeitet, aber nach dem was ich gelesen habe, muss das Element nur positioniert sein, damit der z-index greift.

Was kommt denn bei deinem Beispiel raus? Funktioniert es da?

 

[neuroleptika]

Hier stört das Komma

#main_right,

Das Kenne ich nicht:

 background-z-index: +1

Ich kann mir nichts darunter Vorstellen.
Du hast für alles feste px-Angaben. Wozu dann Tranzparenz?

Zeige mal dein Komplettes Beispiel mit Link und / oder ein Bild wie es aussehen soll.



@_Thor_

muss das Element nur positioniert sein, damit der z-index greift

position: relative; reicht dafür aus (wenn sich die Elemente überlappen).

 

[Toastbrot]

@_Thor_

position: relative; reicht dafür aus (wenn sich die Elemente überlappen).

Klar reicht das aus, aber das ist doch dann positioniert, oder sehe ich das falsch?

Eigentlich deshalb, weil es EIGENTLICH so funktionieren müsste und ich mich deshalb frage, wieso es bei dir offensichtlich nicht funktioniert.

 

[neuroleptika]

Die Elemente überlappen sich nicht.
Sie sind verschachtelt.
(sie liegen nicht nebeneinander sondern ineinander)

 

[Loon3y]

Hier stört das Komma

das stört, weil ich es nicht gelöscht habe...eigentlich kommt da noch ein #main_left nach dem komma.

Das Kenne ich nicht:

 background-z-index: +1

kannte ich auch nicht..bis ich auf diesen Link gestoßen bin:

Random CSS Thought: Background-z-index • CSS & (X)HTML • Kilian Valkhof

Ich kann mir nichts darunter Vorstellen.
Du hast für alles feste px-Angaben. Wozu dann Tranzparenz?

fest Pixelangaben, weil es keine Anwendung für den Browser auf dem computer ist, sondern eine Applikation mit fest vorgegebener Auflösung (z.B. Handy).

Zeige mal dein Komplettes Beispiel mit Link und / oder ein Bild wie es aussehen soll.

Geht leider nicht...Hab aber mal einen Paint-Screen angehängt..das weiß ist transparent und geht ins schwarz über.


Grüßli
Loon3y

Edit: Problem "gelöst":

#main_right { 
       width: 380px;
       height: 870px; 
       float:left; 
       [B]position:relative; [/B]
       background: url(../img/fw/shadow_right.png) repeat-y; 
}
#main_right ul li { 
       width:380px; 
       height:230px; 
       margin:0px 0px 10px; 
       background:url(../img/fw/box_standard.png); 
       [B]position:relative; [/B]
       [B]z-index:-1;  [/B]
}

Negativer z-index - funktioniert im Opera..sollte für mein Problem i.O. sein.