Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css]z-index i problem z IE7
Forum PHP.pl > Forum > Przedszkole
windman
mam 2 linki (Linki 1, Link 2) jeden po drugim, po najechaniu myszką na którys z nich wyskakuje div z opisem.
Link 2 jest zaraz pod Link 1 i wyskakujący div z opisem dla Link 1 powinien przysłonić Link 2 i generalnie to robi tło oblewa Link 2 ale sam tekst Link 2 przebija.

  1. <div style="position:relative;">
  2. <a href="#" onmouseover="document.getElementById('1').style.display='block'" onmouseout="document.getElementById('1').style.display='none'">Link 1</a>
  3. <div id="1" style="position:absolute; top:20;left:0;width:200px;height:200px;background-color:yellow;display:none;z-index:2">Opis dla1</div>
  4. </div>
  5. <br>
  6. <br>
  7. <br>
  8. <div style="position:relative;">
  9. <a href="#" onmouseover="document.getElementById('2').style.display='block'" onmouseout="document.getElementById('2').style.display='none'">Link 2</a>
  10. <div id="2" style="position:absolute; top:20;left:0;width:200px;height:200px;background-color:yellow;display:none">Opis dla 2</div>
  11. </div>


Dałem więc do diva z Link 1 "z-index: 2", pomaga jedynie w firefoxie, a IE7 nadal sie opiera.
Pomaga jedynie nadanie wyższego indexu dla div`a oplatającego zarówno link jak i div z opisem.

Czy tak powinno być? Która przeglądarka reaguje prawidłowo, czy może robie coś źle?

Polecacie jakiś konkretny sposób na wykonanie własnych "chmurek"?
Chodzi mi o to, czy budujecie jednego diva, następnie odczytujecie miejsce gdzie jest myszka i tam go wyświetlacie z odpowiednią zawartością? Czy może pod każdym linkiem ukrywanie diva, który ukazuje się po najechaniu myszką nad link czy obrazek...?
Kowalikus
Sprawdź to:

  1. <div style="position:relative;z-index:2">
  2. <a href="#" onmouseover="document.getElementById('1').style.display='block'" onmouseout="document.getElementById('1').style.display='none'">Link 1</a>
  3. <div id="1" style="position:absolute; top:20;left:0;width:200px;height:200px;background-color:yellow;display:none;">Opis dla1</div>
  4. </div>
  5.  
  6.  
  7. <br>
  8. <br>
  9. <br>
  10. <div style="position:relative;z-index:1">
  11. <a href="#" onmouseover="document.getElementById('2').style.display='block'" onmouseout="document.getElementById('2').style.display='none'">Link 2</a>
  12. <div id="2" style="position:absolute; top:20;left:0;width:200px;height:200px;background-color:yellow;display:none">Opis dla 2</div>
  13. </div>




Niestety IE 7 ma (bynajmniej tak wnioskuję) to do siebie, że z-index działa tylko na elementach będących na tej samej wysokości w drzewie DOM.

IE z-index bug
windman
to co zaproponowałeś działa, napisałem że pomaga jedynie zastosowanie z-index dla diva oplatającego.
Dowiędziałem się jednak, że to błąd IE (jakbyż inaczej).

Dzięki.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.