✔ CSS z-index Frage

Hallo,

ich habe hier ein Beispiel, zwei Kasten mit positioniert mit CSS und z-index, das besondere daran ist der zweite Kasten ist im ersten drine, bekommt es irgenjemand hin durch z-index oder anderen Werten den ersten Kasten trotzdem vor den zweiten erscheinen zu lassen, also den braunen vor den grünen?

Der HTML Code muss aber so bleiben nur das CSS darf man verändern.

Code: 
<div style="background:#9F0000;width:200px;height:200px;position:relative;z-index:3">1



<span style="display:block;background:#00FF00;width:200px;height:200px;position:relative;left:20px;">2</span>


</div>
 
Hi,

tue mir bitte den Gefallen, und denk einfach mal im stillen Kämmerlein über die Frage nach, wie der Hintergrund des Elternelements den Hintergrund bzw. Inhalt seines Nachfolgeelements überdecken soll.

Mission Impossible

Ich war dann mal an dieser Stelle auch so frei, deine letzten drei gestarteten Themen der besseren Übersicht wegen zusammenzuheften, und möchte dich darum bitten, deine weiteren Gedankenspiele bzgl. der Schichtpositionierung hier fortzusetzen, und nicht zu jeder weiteren "z-index-Modellvariante" ein neues Thema ins CSS-Forum zu stellen. Vielen Dank!

mfg Maik
 
Ja kann ich verstehen, ich wollt mich gar nicht so lange damit aufhalten und ist doch wieder zu viel geworden.

Also der aktuelle Stand meiner Test ist komisch jetzt habe ich in den CSS Teil einfacch folgendes geschrieben:
Code: 
:hover{}
und aufeinmal geht das Menü nicht mehr weg im IE Browser, und ich habe sowas noch nirgendwo gelesen wieso das funktioniert.

Der letzte Schrit ist jetzt das ich es hinbekommen muss ein Tooltip auf die Rechte Seite zu projezieren. Aber ich kapier nicht so recht wieso der Browser mit dem bisjen CSS Code so anders reagiert vor allem weil es doch ziemlich unlogiesch Stück Code ist, wer verstehen will was ich meine kann es ja mal probieren:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>Z-index Test</title>

<style type="text/css">
.gruenekasten{
width:645px;
height:500px;
position:relative;
border:10px solid #00DF00;
}


.gelbekasten{
width:217px;
border:10px solid #FFFF00;
}

.grauekasten {
display:block;
margin:0px;
padding:0px;
background:#9F9F9F;
}

:hover{}
/*-------------------------------------------*/
/*wird benutzt wegen IE Browser und hover    */
/*-------------------------------------------*/
a.hauptlink,
a.hauptlink:link,
a.hauptlink:active,
a.hauptlink:visited {display:inline;text-decoration:none;font-size:14px;}
a.hauptlink:hover   {display:inline;text-decoration:none;}



/*----------------------------------------------------------------------*/
/*Link mit blaue hintergrund, bei hover geht unten das n&auml;chste men&uuml; auf */
/*----------------------------------------------------------------------*/
a.hauptlink         span.linkk,
a.hauptlink:link    span.linkk,
a.hauptlink:visited span.linkk {display:block;background:#00FFFF;}
a.hauptlink:hover   span.linkk {background:#fff;}
a.hauptlink:active  span.linkk {background:#fff;}
a.hauptlink:focus   span.linkk {background:#fff;}



/*--------------------------------------------*/
/*Tabelle kasten per tooltip erscheinen lassen*/
/*--------------------------------------------*/
a.hauptlink         .weisertoolkasten,
a.hauptlink:link    .weisertoolkasten,
a.hauptlink:visited .weisertoolkasten {display:none;background:#fff;position:absolute;left:-1000px;}
a.hauptlink:hover  .weisertoolkasten{display:block;height:160px;position:relative;left:0px;}
a.hauptlink:active .weisertoolkasten{display:block;height:160px;position:relative;left:0px;}
a.hauptlink:focus  .weisertoolkasten{display:block;height:160px;position:relative;left:0px;}



/*--------------------------------------------*/
/*Tabelle kasten per tooltip erscheinen lassen*/
/*--------------------------------------------*/
.ubertable{
height:150px;
background:#FF9F00;
}
table.ubertable td  {width:40px;height:40px;border:4px solid #fff;}
table.ubertable td a{display:block;text-decoration:none;width:40px;height:40px;border:1px solid #fff;}


a.linkubers table.ubertable td a:hover .info{
display:block;
width:410px;
height:500px;
position:absolute;
margin:0px;
padding:0px;
border:1px solid #9F9F9F;
background:#DF0000;
top:130px;
left:30px;
z-index:3;
}


/*-------------------------------------------*/
/*rechte kasten per tooltip erscheinen lassen*/
/*-------------------------------------------*/
a.hauptlink         span.rechtekasten,
a.hauptlink:link    span.rechtekasten,
a.hauptlink:visited span.rechtekasten {display:none;width:400px;height:400px;position:absolute;left:-1000px;background:#e3edf2;}
a.hauptlink:hover   span.rechtekasten {display:block;top:0px;left:240px;z-index:1;}
a.hauptlink:active  span.rechtekasten {display:block;top:0px;left:240px;z-index:1;}
a.hauptlink:focus   span.rechtekasten {display:block;top:0px;left:240px;z-index:1;}










</style>


</head>
<body>
<div class="gruenekasten">
<div class="gelbekasten">



<a class="hauptlink" href="#nogo">







<span class="linkk">Link</span>
<span class="grauekasten">


<span class="weisertoolkasten">
<table class="ubertable" cellspacing="0" cellpadding="0">
<tr>
 <td><a href="#kk">L<span class="info">Rot</span></a></td>
 <td><a href="#kk">L<span class="info">Rot</span></a></td>
 <td><a href="#kk">L<span class="info">Rot</span></a></td>
 <td><a href="#kk">L<span class="info">Rot</span></a></td>
</tr>
</tr>
</table>
</span>
<span class="rechtekasten">rechte kasten blau</span>
</span>






</a>




</div>
</div>

</body>
</html>

Lass mich bitte wissen wenn jemand den Tooltip hinbekommt.
 
son gohan hat gesagt.:
und aufeinmal geht das Menü nicht mehr weg im IE Browser
Zum Vergrößern anklicken....
Kann ich mit deinem Quellcode bei mir im IE7 nicht reproduzieren, und im IE6 öffnet sich ja noch nicht mal das Menü.

Naja, wie auch immer, wenn du weiterhin das "Tooltip"-Rad neu erfinden möchtest, anstatt zu gebrauchsfertigen und praxistauglichen Lösungen zu greifen, tue dir keinen Zwang an :)

mfg Maik
 
Kannst mir noch mal ein Tipp geben wie ich am besten das ganze in verschiedenen IE Browsern testen kann?

In mein IE7 sieht es jetzt aus wie im Bild unten, wenn jetzt jemand über das Wort LRot fährt sollte der Tooltip rechts kommen, wenn ich das noch hinbekomme wars das schon.

Ich brauche halt etwas ohne Javascript wegen meinen strengen Besuchern.

Das ist das Testbild was bei mir im IE7 Browser raus kommt mit dem Code:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>Z-index Test</title>

<style type="text/css">
.gruenekasten{
width:645px;
height:500px;
position:relative;
border:10px solid #00DF00;
}


.gelbekasten{
width:217px;
border:10px solid #FFFF00;
}

.grauekasten {
display:block;
margin:0px;
padding:0px;
background:#9F9F9F;
}

:hover{}
/*-------------------------------------------*/
/*wird benutzt wegen IE Browser und hover    */
/*-------------------------------------------*/
a.hauptlink,
a.hauptlink:link,
a.hauptlink:active,
a.hauptlink:visited {display:inline;text-decoration:none;font-size:14px;}
a.hauptlink:hover   {display:inline;text-decoration:none;}



/*----------------------------------------------------------------------*/
/*Link mit blaue hintergrund, bei hover geht unten das n&auml;chste men&uuml; auf */
/*----------------------------------------------------------------------*/
a.hauptlink         span.linkk,
a.hauptlink:link    span.linkk,
a.hauptlink:visited span.linkk {display:block;background:#00FFFF;}
a.hauptlink:hover   span.linkk {background:#fff;}
a.hauptlink:active  span.linkk {background:#fff;}
a.hauptlink:focus   span.linkk {background:#fff;}



/*--------------------------------------------*/
/*Tabelle kasten per tooltip erscheinen lassen*/
/*--------------------------------------------*/
a.hauptlink         .weisertoolkasten,
a.hauptlink:link    .weisertoolkasten,
a.hauptlink:visited .weisertoolkasten {display:none;background:#fff;position:absolute;left:-1000px;}
a.hauptlink:hover  .weisertoolkasten{display:block;height:160px;position:relative;left:0px;}
a.hauptlink:active .weisertoolkasten{display:block;height:160px;position:relative;left:0px;}
a.hauptlink:focus  .weisertoolkasten{display:block;height:160px;position:relative;left:0px;}



/*--------------------------------------------*/
/*Tabelle kasten per tooltip erscheinen lassen*/
/*--------------------------------------------*/
.ubertable{
height:150px;
background:#FF9F00;
}
table.ubertable td  {width:40px;height:40px;border:4px solid #fff;}
table.ubertable td a{display:block;text-decoration:none;width:40px;height:40px;border:1px solid #fff;}


a.linkubers table.ubertable td a:hover .info{
display:block;
width:410px;
height:500px;
position:absolute;
margin:0px;
padding:0px;
border:1px solid #9F9F9F;
background:#DF0000;
top:130px;
left:30px;
z-index:3;
}


/*-------------------------------------------*/
/*rechte kasten per tooltip erscheinen lassen*/
/*-------------------------------------------*/
a.hauptlink         span.rechtekasten,
a.hauptlink:link    span.rechtekasten,
a.hauptlink:visited span.rechtekasten {display:none;width:400px;height:400px;position:absolute;left:-1000px;background:#e3edf2;}
a.hauptlink:hover   span.rechtekasten {display:block;top:0px;left:240px;z-index:1;}
a.hauptlink:active  span.rechtekasten {display:block;top:0px;left:240px;z-index:1;}
a.hauptlink:focus   span.rechtekasten {display:block;top:0px;left:240px;z-index:1;}










</style>


</head>
<body>
<div class="gruenekasten">
<div class="gelbekasten">



<a class="hauptlink" href="#nogo">







<span class="linkk">Link</span>
<span class="grauekasten">


<span class="weisertoolkasten">
<table class="ubertable" cellspacing="0" cellpadding="0">
<tr>
 <td><a href="#kk">L<span class="info">Rot</span></a></td>
 <td><a href="#kk">L<span class="info">Rot</span></a></td>
 <td><a href="#kk">L<span class="info">Rot</span></a></td>
 <td><a href="#kk">L<span class="info">Rot</span></a></td>
</tr>
</tr>
</table>
</span>
<span class="rechtekasten">rechte kasten blau</span>
</span>






</a>




</div>
</div>

</body>
</html>
 

Anhänge

  • test.jpg
    test.jpg
    15,6 KB · Aufrufe: 52
Zuerst sieht das Menü aus wie in diesem Bild unten. Wenn man dann mit der maus auf Link geht, öffnet sich das Drapdown Menü und man kann nun als nächstes auf die Hyperlinks gehen in der roten Tabelle.

Wenn man das tut soll rechts der blaue kasten der gleichzeitig mit auf ging ersetzt werden durch einen neuen Kasten in rot, das wars eigentlich schon.
 

Anhänge

  • test.jpg
    test.jpg
    9,2 KB · Aufrufe: 18
Jo, auch das hab ich längst vernommen :rolleyes:

Von meiner Seite hab ich zu dem Thema und der browserübergreifenden Realisierung alles gesagt.

Wenn dir diese beiden Lösungswege nicht zusagen, kann ich dir auch nicht weiterhelfen.

mfg Maik
 
Maik, funktioniert den das beispiel von Stu in allen Browsern bei dir, ich bin da etwas Mißtrauisch, er schreibt auch nur das er IE6 und IE 7 getestet hat, in sein Code benutzt er :hover für eine ul Liste aber das klappt nicht so gut beim IE...
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück