Il est recommandé d'avoir une compréhension approfondie du positionnement de position et des attributs z-index dans l'échange CSS_Experience.

Auteur : Cutsin
Adresse originale : http://www.moonless.net/blog/2007/09/csspositionz-index.html

Remarque : cet article est uniquement à des fins de communication s'il y en a. caractère inapproprié, bienvenue Critiquez et corrigez, mais veuillez indiquer la raison, merci !

Comme je ne l'utilise pas habituellement, j'avais une vague compréhension des valeurs absolues et relatives de l'attribut position lorsque j'écrivais du CSS dans le passé, et j'étais encore plus confus à propos du La mise en cascade du z-index En plus des facteurs de compréhension, chaque résultat d'analyse différent selon les navigateurs est également un gros problème. J'ai lu attentivement le document CSS aujourd'hui et j'ai enfin une compréhension plus approfondie du flottement et du positionnement du modèle de boîte.

Nous sommes très susceptibles de rencontrer de tels problèmes en pratique :
1. Faites une navigation horizontale, puis un menu déroulant apparaît après le passage de la souris dessus, puis le contrôle de position de ce menu déroulant. le menu bas est une clé ; 2. Nous souhaitons placer plusieurs invites à bulles flottant sur la page dans une mise en page normale. Pour le moment, nous ne voulons pas que les invites à bulles détruisent la mise en page normale du document, mais nous le faisons également. Je ne veux pas que les invites à bulles soient positionnées partout dans différents navigateurs flottant de manière aléatoire.
3. Lorsque nous insérons une petite icône dans un texte normal, nous utilisons généralement la balise , et son problème de centrage vertical prête à confusion, que vous utilisiez l'attribut html absmiddle ou l'attribut css. vertical-align, ou en utilisant la hauteur + la hauteur de ligne de l'objet parent, il sera toujours différent selon les navigateurs.

Eh bien, avez-vous également rencontré les problèmes ci-dessus ? Si vous n'avez pas encore de bonne solution, vous souhaiterez peut-être continuer à lire cet article, il peut vous être utile :)
Regardons d'abord plusieurs définitions de valeur de l'attribut position :

position : statique, absolu, relatif

statique  : Valeur par défaut. Si l'attribut position n'est pas spécifié, les objets HTML qui prennent en charge l'attribut position sont par défaut statiques. Cela peut être compris comme ceci : traitez la page HTML comme un flux de document et la position séquentielle de chaque balise dans le code source est la présentation. l'ordre de leurs objets correspondants. Tous les objets avec une valeur statique sont rendus dans l'ordre des balises html que vous écrivez. Comme le montre la figure ci-dessous, il s'agit d'une navigation horizontale courante avec float:left; spécifié :

screen.width*0.7) {this.resized=true; 0.7 ; this.style.cursor='hand'; this.alt='Cliquez ici pour ouvrir une nouvelle fenêtrenCTRL+Molette de la souris pour zoomer/dézoomer';}" onclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://lh6.google.com/cutsin/RuUJqZ6TMOI/AAAAAAAABuo/v0kyBUwGxOk/s400/css_position_1.gif" onload="if(this .width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Cliquez ici pour ouvrir une nouvelle fenêtrenCTRL+Molette de la souris pour zoomer/dézoomer';}" =0>

Prompt a: Su Yu's Im CSS2.0-Handbuch wird erwähnt, dass der Unterschied zwischen relativ und absolut positionierten Bildlaufleisten nicht absolut ist. Zumindest in Firefox, Opera und Safari wird die Bildlaufleiste weiterhin angezeigt : Das Z-Index-Attribut, dessen Attributwert ein absolutes Objekt ist, kann die Reihenfolge der kaskadierenden Anzeige festlegen, was direkt wirksam ist, und das Z-Index-Attribut, dessen Attributwert ein relatives Objekt ist, muss beim Festlegen vorsichtig sein Wenn Sie den Z-Index des aktuellen Objekts auf -1 setzen, wird er nicht in Firefox angezeigt (beachten Sie, dass dies nicht bedeutet, dass der Browser falsch ist, sondern dass das übergeordnete Objekt das Stammelement ist body, dann ist der Z-Index ungültig und jede Z-Index-Einstellung wird nicht nach dem Root-Element angezeigt. Zusätzlich zum Parsing-Fehler des IE (dank Tipp Nr. 19) muss er auf über 0 gesetzt werden Wenn wir möchten, dass andere Objekte es blockieren, können wir die Position anderer Objekte nur auf relativ und z setzen. Nehmen Sie einfach einen größeren Wert für das Indexattribut

Ich weiß nicht, dass der obige Ausdruck möglicherweise nicht sehr gut ist Es ist klar, dass Sie es selbst tun müssen. Das obige Problem ist gelöst, je nach den Designanforderungen.
Es gibt viele Lösungen für Problem 1. Ich persönlich empfehle die Verwendung von semantischem dl, dt, dd, um dies zu erreichen. Die Leistung dieser Methode ist in verschiedenen Browsern grundsätzlich gleich (sie wurde in IE, Firefox, Opera usw. getestet). Aus Zeitgründen kann ich den Code nur als Referenz angeben:

screen.width*0.7) {this. resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Klicken Sie hier, um ein neues Fenster zu öffnen. STRG+Mausrad zum Vergrößern/Verkleinern';}" onclick=" if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src= "http://lh5.google.com/cutsin/RuUXtJ6TMRI/AAAAAAABvA/qI7EOQ8e2nU/ s800/css_position_4.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width =screen.width*0.7; this.alt='Klicken Sie hier, um ein neues Fenster zu öffnennSTRG+ Mausrad zum Vergrößern/Verkleinern';}" border=0>


Körper { Farbe:#fff; Schriftgröße:12px; } ulli { float:left; Höhe:30px; Hintergrundfarbe:#99CC99; Rand:0 10px; Polsterung:0; border:1px solid #c30; Breite: 100 Pixel; } ullidiv{ border:1px solid #f00; Hintergrundfarbe:#996666; Breite: 100 Pixel; Höhe: 100 Pixel; Position:absolut; margin-top:15px; margin-left:-1px; *margin-left:-79px; } Ullidl, ul li dl dt, ul li dl dd { Rand:0; Polsterung:0; } ul li dl dd { border:1px solid #f00; Hintergrundfarbe:#996666; Breite: 100 Pixel; Höhe: 100 Pixel; Position:absolut; margin-top:11px; *margin-top:10px; margin-left:-1px; }
<ul>Liste b<li> <div>Liste c</div> </li> <li style="position:relative;"> </li>Titel – dt<li> </li>Dropdown-Menü – dd<li> <dl> <dt> </dt> <dd></dd> </dl> </li> </ul>[Strg+A Alle auswählen Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie es aktualisieren, um es auszuführen
]Fügen Sie bitte ein Beispiel hinzu. Vergleichende Anzeige in IE- und Nicht-IE-Browsern:


Ein Stück Text, ein Stück Text, ein Stück Text, ein Stück Text, ein Stück Text, ein Stück Text

<style> .main { width:500px; height:500px; background-color:#9cf; } .layer_a, .layer_b, .layer_c, .layer_d { position:absolute; width:100px; height:60px; } .layer_a { background-color:#69c; } .layer_b { background-color:#369; } .layer_c { background-color:#eee; } .layer_d { background-color:#696; } .brd { border:1px solid #c30; margin:1em; } .block { display:block; } </style> <div class="main">Ein weiterer TextEin weiterer TextEin weiterer Text<div class="brd"> <div class="layer_a"></div> </div>Dritter Absatz mit anderem TextDritter Absatz mit anderem Text<div class="brd"> <div class="layer_b"></div> </div>Der vierte Absatz gibt den Text des Blocks an<p class="brd"></p> <div class="layer_c"></div> Der vierte Absatz gibt den Text des Blocks an<p class="brd block"></p> <div class="layer_d"> <map class="brd block">Der vierte Absatz gibt den Text des Blocks an<div class="layer_d"></div></map> <dd class="brd">Der vierte Absatz gibt den Text des Blocks an<div class="layer_a"></div> </dd> <li class="brd">Der vierte Absatz gibt den Text des Blocks an<div class="layer_b"></div> </li> </div> <br><input onclick="runEx('runcode51680')" type="button" value="运行代码"> <input onclick="doCopy('runcode51680')" type="button" value="复制代码"> <input onclick="doSave(runcode51680)" type="button" value="保存代码">[Strg+A Alle auswählen Hinweis: <a href="/article/23421.htm" title="查看具体详情" target="_blank">Wenn Sie externe Js einführen müssen, müssen Sie zum Ausführen eine Aktualisierung durchführen </a>]</div> <br> Wie Sie in diesem Beispiel sehen können, erbt der IE beim absoluten Positionieren eines Blockelements, wenn das übergeordnete Element ein Element auf Blockebene ist, immer noch die Koordinaten seiner ursprünglichen Position, nachdem es aus dem Dokumentfluss gezogen wurde Bei IE-Browsern lautet der Ansatz: Ziehen Sie nach dem Fließen des Dokuments direkt die Koordinaten des übergeordneten Elements heraus. <br>