CSS-Z-Index Problem, wenn innerhalb der Tabelle Zelle

Ich habe einen Kalender/Tabelle, dass, wenn Sie den Mauszeiger über jeden Tag haben wir ein kleines Popup, das ist absolut unter jeder Zelle Position.CSS-Z-Index Problem, wenn innerhalb der Tabelle Zelle

Um diese Arbeit zu machen, habe ich eine <div style="relative" /> in jeder Zelle hinzugefügt. Funktioniert gut in FF, wenn Sie jedoch im IE den Mauszeiger darüber bewegen, wird der Z-Index ignoriert.

enter image description here

Ich habe alle Hacks versucht, ich denken kann, um es in IE 7 + 8.

Quelle

2012-04-30 John Magnolia

habe ich nicht ie hier, aber hast du versucht Display: Inline? – tmaximini

Da das Durcheinander mit Z-Indizes unordentlich wird, wäre die beste Lösung, alle Popups außerhalb und nach der Tabelle zu platzieren. Dadurch werden die Probleme mit der Überlagerung behoben. –

Gib uns deinen Code-Mann! Wo Arr ze C0dez! –

Keine Notwendigkeit für alle einzelnen z-indexes auf den .wrapper divs innerhalb der td Elemente (sie alle 1 eingestellt werden kann, glaube ich), und legen Sie diese Eigenschaften:

/* add these two to your selector */ 
#calendar tbody td { 
    position: relative; 
    z-index: 1; 
} 

/* create this new selector */ 
#calendar tbody td:hover { 
    z-index: 2; 
}

mit Firebug und Entwickler IE-Tools, es scheint mir, dass es in Firefox und IE7 arbeitet und 8.

Quelle

2012-05-07 18:58:14 ScottS

Diese Hälfte funktionierte, obwohl die relative Position nicht auf der 'td' funktionierte, also fügte ich in jeder Zelle ein' .wrapper div' hinzu. Dann 'td: hover .wrapper' –

Versuchen Sie, die Arbeit position: relative und ein z-index auf dem table sowie die td Einstellung.

Quelle

2012-04-30 14:23:06 newtron

In Ihrem absolut positioniert schweben Element, legen Sie eine relativ positioniert div und geben ihm einen Z-Index von 500. wie Ie7 hält absolut und relativ positionierte Elemente als separate Z-Index mit stapelt

<div class="hoverContent" style="opacity: 1; display: none;"> 
    <div style='position:relative;z-index:500;'> 
     <a class="btn popme" >Book Now</a> 
     <p>content etc</p> 
     <label></label> 
    </div> 
</div>

So etwas wie dass ich denke,

Quelle

2012-04-30 15:09:38

Nette Idee, um dieses Problem zu umgehen, obwohl dies auch keinen Unterschied machte –

ich das mir zu helfen mit einem ähnlichen Problem verwendet haben: http://css-tricks.com/snippets/jquery/fixing-ie-z-index/

wenn dies nicht hilft macht es aus, wenn Sie die Tabelle selbst ein z-Index geben von 1 oder etwas niedriger?

Quelle

2012-05-07 16:06:07

Ich konnte dies in Smarty erreichen, obwohl keine Wirkung hatte –

Oh, haben Sie den Code für mich zu sehen? –

Gleiche Antwort wie @JustinY durch Inkrementieren des Z-Index –

Das Problem könnte durch das IE-Z-Index-Stapelproblem verursacht werden, wie in this answer zu einer verwandten Frage beschrieben.

In Ihrem Beispiel konnte ich das Z-Index-Problem beheben, indem Sie einen Z-Index zum div.wrapper innerhalb der Tabellenzellen hinzufügen.

Um die Schichtung mit Zellen davor und danach zu umgehen, müssten Sie den Z-Index der Zellen mit Javascript ändern.

Da aber das Z-Index-Verfahren unübersichtlich wird, wäre es die beste Lösung, alle Popups außerhalb und nach der Tabelle zu platzieren. Das wird deine Layering-Probleme ohne verrücktes/hackliches CSS beheben.

Quelle

2012-05-07 16:10:26

Leider würde dies nie in einem Tabellenraster wie ein Kalender mit Ihrer Methode der Erhöhung des Z-Index funktionieren, weil Sie immer eine Zelle vor/nach/über/unter –

@JohnMagnolia Ich empfehle die Popups außerhalb der Tabelle zu nehmen. –

Das Problem ist, dass .hoverContent ist ein Kind von .wrapper, sollten Sie sie bewegen, so dass sie auf der gleichen Ebene sitzen:

<td class="available"> 
    <div class="wrapper" style="z-index: 0;"> 
     <span class="date">10</span><strong class="price">£200</strong> 
     <a href="/victory_cottage/booking/init/id/1/from/1336611600/nights/7" class="link popme"></a> 
    </div> 
    <div class="hoverContent">...

die td Set position:relative zu sein, setzen Sie .hoverContent als position:absolute und das wird Ihr Problem lösen.

Quelle

2012-05-09 01:10:26

Position relativ funktioniert nicht gut mit' td' –

Wenn Ihre Komponente selbst absolut positioniert und vorübergehend über anderen Komponenten angezeigt wird, fügen Sie sie einfach der obersten Ebene hinzu, d. H. Der Seite, und Sie müssen sich nicht um die Z-Reihenfolge oder Positionierung der Tabelle kümmern.

Quelle

2016-02-28 12:44:18

CSS-Z-Index Problem, wenn innerhalb der Tabelle Zelle

Antwort

Verwandte Themen