Skocz do zawartości

Zarchiwizowany

Ten temat jest archiwizowany i nie można dodawać nowych odpowiedzi.

NIKCZEMNY STOLEC

[CSS] div z absolute nie nachodzi na tabele z relative.

Polecane posty

Witam

Natknąłem sie na dziwny problem przy próbie wstawienia elementu DIV i pozycjonownia go absolutnie tak aby był wyświetlany nad tabelą.

Oto przykładowy kod:

<html>
<body>
<table border=1 style="position: relative;z-index: 3;margin-top: 10px;background-color: yellow">
    <tr>
        <td>teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext<br>teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext<br>teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext
            <div style="position: absolute;background-color: red;width: 200px;height: 150px;z-index: 9999">aaaaaaaaaaaaaaaaa<br>bbbbbbbbbbb<br>cccccccccc</div>
            <br>teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext
        </td>
    </tr>
    </table>
    <table border=1 style="position: relative;z-index: 3;margin-top: 10px;background-color: yellow">
        <tr>
            <td>teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext<br>teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext<br>teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext</td>
        </tr>
    </table>
</body>
</html>

Po wyświetleniu takiej strony widać, że div z czerwonym tłem jest nad pierwszą tabelą, ale chowa się pod drugą identyczną tabele. Co jest tego powodem? Jak sprawić aby div był wyświetlany nad oboma tabelami.

Z góry dziekuję za pomoc i wyjaśnienia.

Link do komentarza
Udostępnij na innych stronach

"prawidłowy" kod

<html>

<body>

<table border=1 style="position: relative;z-index: 0;margin-top: 10px;background-color: yellow">

<tr>

<td>teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext<br>teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext<br>teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext

<div style="position: absolute;background-color: red;width: 200px;height: 150px;z-index: 1">aaaaaaaaaaaaaaaaa<br>bbbbbbbbbbb<br>cccccccccc</div>

<br>teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext

</td>

</tr>

</table>

<table border=1 style="position: relative;z-index: -1;margin-top: 10px;background-color: yellow">

<tr>

<td>teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext<br>teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext<br>teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext</td>

</tr>

</table>

</body>

</html>

polecam http://www.kurshtml.boo.pl/css/nakladanie,...cjonowanie.html

Link do komentarza
Udostępnij na innych stronach

Dzieki za odpowiedź.

Niestety ujemny index nie rozwiąże mojego problemu. Na stronie, którą tworzę mam generowaną w php liste tabel, które zawierają się w nadrzędnym divie, który ma ustawione tło. Jeśli użyję z-index: -1 dla tabel to będą one się chować pod tło nadrzędnego diva :-(. Na stronie, którą podałeś ładnie to jest wyjaśnione jako kontekst stosu - kontekst stosu tabel będzie niższy niż ten nadrzędnego diva i z tego co widzę nie da sie tego przeskoczyć.

Dlatego jedynym rozwiązaniem będzie dynamiczne przypisywanie z-index'ów dla każdej tabeli, poczynajac od najwyższego dla pierwszej. Chciałem tego uniknąć mając nadzieję, że da się sprawę rozwiązać samym CSS'es ale prawdopodobnie nie da się. No chyba, że ktos będzie miał jeszcze jakiś inny pomysł.

Link do komentarza
Udostępnij na innych stronach



  • Kto przegląda   0 użytkowników

    • Brak zalogowanych użytkowników przeglądających tę stronę.
×
×
  • Utwórz nowe...