Setare z-index maxim

[andras]

Salut,
Am un div de forma asta

Cod: Selectaţi tot

<div  >
   <img class="td_tooltip" src="<?php echo $photo; ?>"  />
</div>

Cum fac sa apara cu z-index maxim (adica deasupra tuturor celorlalte elemente) fara sa fac nici o referire la position: ? Daca pun position: absolute; imi modifica pozitia imaginii la :hover si nu vreau asta. Multumesc.

Elementul la care se aplica z-index trebuie sa aibe setat una din pozitionarile: relative, absolute, fixed.
Valoarea maxima pt z-index depinde de browser, dar la toate poate fi si un numar cu noua cifre. Ca regula pt. maxim, sa depaseasca numarul de elemente din pagina, si sa stii cat ai setat la altele daca vrei un z-index mai mic sau mai mare decat acelea.
- Dar cu z-index nu obtii efectul dat de "position: absolute;", adica nu va fi pozitionat peste alte elemente dinaintea lui, ci dupa ele. Daca vrei sa apara peste elemente care sunt inainte si dupa, trebuie position:absolute;.
Vezi cum e in acest exemplu:

Cod: Selectaţi tot

<style>
#dv0 {
  background: #d0d0fe;
}
#dv1 {
  border: 1px solid #333;
  background: #eee;
}
#dv1 img {
  position: relative;
  margin: 1px auto;
  z-index: 9999;
}
#dv2 {
  position: absolute;
  top: 22px;
  left: 1px;
  width: 80%;
  height: 50px;
  margin: 0 auto;
  background: #bbeebb;
}
</style>

<div id="dv0">Div albastru inainte de imagine.</div>
<div id="dv1">Div cu imagine position:relative; si z-index:9999;
  <img src="https://marplo.net/imgs/baner.jpg" alt="MarPlo.net" />
</div>
<div id="dv2">Div position:absolute;, adaugat dupa imagine.</div>

Rezultat:

Div albastru inainte de imagine.

Div cu imagine position:relative; si z-index:9999;

Div position:absolute;, adaugat dupa imagine.

Chiar nu pot gasi nici o solutie ? Am incercat in fel si chip. Am tooltip (facut cu HTML si CSS) o poza intr-o coloana din tabel. Arata cam asa (simplificat):

Cod: Selectaţi tot

<div id="a11" >   <!-- div-ul parinte-->
   <div id="scrol" style="height: 90%; overflow:auto; float:left;" class="scroll-pane"> <!-- div care afiseaza doar un scroll, dar in clasa scroll-pane n-am pus nimic-->
       <table><tbody><tr><td>
           <div style="z-index:9000;position:absolute;">    <!-- div-ul tooltip-->
                  <img src="<?php echo $photo; ?>" class="td_tooltip" />    <!-- este chiar tooltip-->
	 </div>
       </td></tr></tbody></table>
   </div>
</div>

Div-ul cu poza are z-index maxim. La un tabel cu multe inregistrari cind derulez scroll-ul, poza tooltip coboara exact cu cit derulez scroll-ul (are position:absolute; si urmareste scroll-ul). Acest div id=scroll l-am pus ca sa am scroll-ul exact linga tabela in dreapta. Nu gasesc nici o solutie ca la scroll sa pastrez tooltip-ul in dreptul inregistrarii la care se refera. Clasa td_tooltip este :

Cod: Selectaţi tot

td .td_tooltip {/* poze*/
        display: none;
	position: absolute;
	top: -110px;
	left: 117%;
	margin: 0;
	height: 120px;
	z-index: 999;
	outline :8px solid #606060;
}

Se poate rezolva cumva ca tooltip-ul sa nu se deplaseze la scroll? In acelasi timp doresc ca tooltip-ul sa aiba z-index maxim. Multumesc.

Incearca sa pui totul din acea coloana intr-un Div cu "position:relative;" (modifici top, left la Div-ul cu "absoolute" dupa cum trebuie pozitionat).

Cod: Selectaţi tot

<td><div style="position:relative;">
  Continutul din coloana ..
  <div style="z-index:9000; position:absolute; top:1px; left:1px; margin:0">
    <img src="<?php echo $photo; ?>" class="td_tooltip" />
  </div>
</div></td>

Am incercat si varianta asta dar e aceeasi problema: pierde z-index maxim. Nu avem solutii deocamdata.