Atrybut z-index w zdarzeniu "hover" Opcje

[Rellik]

Witam.
Problem pewnie dość prosty, ale jakoś nie mogę sobie poradzić więc pytam:

Może zacznę od kodu:

[PHP] pobierz, plaintext 
<style>
  DIV.test
  {
    width: 165px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    z-index: 1;
  }
 
  DIV.test:hover
  {
    white-space: normal;
    background-color: #363636;
    border: 1px #505050 solid;
    padding: 3px;
    z-index: 2;
  }
</style>
 
<div style="height: 20px;"><div class="test">sdf sf sdf sdf jsdlfj sdlkjflsdkj flsdkjflk sdjflsdj lfjsdlk jfsldkj flsdkjf lskdjflksdj fs</div></div>
<div style="height: 20px;"><div class="test">sdf sf sdf sdf jsdlfj sdlkjflsdkj flsdkjflk sdjflsdj lfjsdlk jfsldkj flsdkjf lskdjflksdj fs</div></div>
<div style="height: 20px;"><div class="test">sdf sf sdf sdf jsdlfj sdlkjflsdkj flsdkjflk sdjflsdj lfjsdlk jfsldkj flsdkjf lskdjflksdj fs</div></div>
<div style="height: 20px;"><div class="test">sdf sf sdf sdf jsdlfj sdlkjflsdkj flsdkjflk sdjflsdj lfjsdlk jfsldkj flsdkjf lskdjflksdj fs</div></div>
<div style="height: 20px;"><div class="test">sdf sf sdf sdf jsdlfj sdlkjflsdkj flsdkjflk sdjflsdj lfjsdlk jfsldkj flsdkjf lskdjflksdj fs</div></div>
[PHP] pobierz, plaintext 

Chodzi o to, że mam kilka divów. Mają one stała szerokość oraz ustawione atrybuty w ten sposób aby przycinały za długi tekst, natomiast po najechaniu kursorem wyświetlały całość rozszerzając diva w pionie.
Problem polega na tym, że rozszerzony div nie zasłania poniższego diva. Ustawienie atrybutu "z-index" nic nie daje.

Jak to ugryźć?

Ten post edytował Rellik 26.01.2015, 16:33:23

[trueblue]

http://www.w3schools.com/cssref/pr_pos_z-index.asp
Zerknij co pisze w "Note".

[Rellik]

Właśnie ustawiając position na absolute ominąłem ten problem z myślą, że jest jakieś inne wyjście, ale wychodzi na to że nie
Dzięki za odpowiedź.

[trueblue]

Na pewno dobrą notkę przeczytałeś?

[presta]

Rozumiem, że rozwinięty div ma zasłaniać div pod spodem .., który jest nie rozwinięty ?
Nie lepiej aby wszystko przesuwało się w dół ?

[Rellik]

Na pewno dobrą notkę przeczytałeś?

"Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)."
Dla moich potrzeb ustawiłem więc "position: absolute". Dlaczego sądzisz, że źle przeczytałem?

Rozumiem, że rozwinięty div ma zasłaniać div pod spodem .., który jest nie rozwinięty ?
Nie lepiej aby wszystko przesuwało się w dół ?

Kod który przytoczyłem to sztucznie stworzony wycinek aplikacji (opis problemu). Odpowiadając na pytanie: NIE, nie lepiej, bo aplikacja ma działać tak i tak i nie może się nic przesuwać.

[trueblue]

"Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)."
Dla moich potrzeb ustawiłem więc "position: absolute". Dlaczego sądzisz, że źle przeczytałem?

Da przykładu, który podałeś position:relative byłby odpowiedni, ale skoro:

Kod który przytoczyłem to sztucznie stworzony wycinek aplikacji (opis problemu).

to ok.

[Rellik]

Da przykładu, który podałeś position:relative byłby odpowiedni, ale skoro:

to ok.

Tak, jest to wycinek dużej aplikacji. Wklejanie całego kodu nie miałoby sensu. Chciałem zobrazować sam problem.
Morał: jak komu potrzeba, można użyć position:absolute, position:relative lub position:fixed i problem rozwiązany.

Temat do zamknięcia.