[CSS] Problem z stylem :hover, Tabela zasłania warstwę Opcje

[Tomplus]

Witam mam problem z warstawami i tabelą:

Zrobiłem prostą rzecz w CSS gdzie po naniesieniu kursora pojawia się treść, styl działa tak jak należy, do momentu gdy na jego drodze nie stanęła tabela.

Tabela która wyświetla listowane dane zasłania część lub całość warstwy span, bawiłem się kolejnością wyświetlania warstw, ale dla tabel to nie dziala i z-index po nic mi się zdaje.

Co mam zrobić aby warstwa hover pojawiła się NAD tabelę <table>, a nie POD nią?



Mam taki styl:

Kod

.tooltip, .tooltip2 {
    position: relative;
}
a.tooltip2 {
    font-size: 0.8em;
}

a.tooltip span, a.tooltip2 span.list {
    display: none;
    text-decoration : none;
    color: #fff;
}
a.tooltip2:hover span.list {
    display: block;
    position: absolute;
    background: olive url(obrazki/tlo.gif);
    z-index:9999;
    text-align: left;
    font-family: verdana;
    letter-spacing: 1px;
    font-size : 1.2em;
    font-variant: small-caps;
    font-style:normal;
    width: 200px;
    height: 250px;
    padding: 4px;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

oraz

[HTML] pobierz, plaintext 
<a href='pobierz.html' class='tooltip2'>POBIERZ <span class='list'>DANE<br>TRESC</span></a>
[HTML] pobierz, plaintext 

Ten post edytował Tomplus 18.06.2012, 15:16:42

[pehaperowiec]

Witam mam problem z warstawami i tabelą:

Zrobiłem prostą rzecz w CSS gdzie po naniesieniu kursora pojawia się treść, styl działa tak jak należy, do momentu gdy na jego drodze nie stanęła tabela.

Tabela która wyświetla listowane dane zasłania część lub całość warstwy span, bawiłem się kolejnością wyświetlania warstw, ale dla tabel to nie dziala i z-index po nic mi się zdaje.

Co mam zrobić aby warstwa hover pojawiła się NAD tabelę <table>, a nie POD nią?



Mam taki styl:

Kod

a.tooltip2:hover span.list {
    display: block;
    position: absolute;
    background: olive url(obrazki/tlo.gif);
    z-index:9999;
    text-align: left;
    font-family: verdana;
    letter-spacing: 1px;
    font-size : 1.2em;
    font-variant: small-caps;
    font-style:normal;
    width: 200px;
    height: 250px;
    padding: 4px;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

oraz

[HTML] pobierz, plaintext 
<a href='pobierz.html' class='tooltip2'>POBIERZ <span class='list'>DANE<br>TRESC</span></a>
[HTML] pobierz, plaintext 

Wystarczy użyc pozycjonowania absolutnego. Poglądowy przykład:

http://jsfiddle.net/LhdUm/

[Tomplus]

Daje plusa za pomoc. Może nie za to że Twoja pomoc okazała się pomocna, ale za pokazanie dobrego kierunku myślenia (IMG:style_emoticons/default/smile.gif)