Es wird empfohlen, über umfassende Kenntnisse der Positionspositionierung und der Z-Index-Attribute im CSS_Experience-Austausch zu verfügen

Autor: Cutsin
Ursprüngliche Adresse: http://www.moonless.net/blog/2007/09/csspositionz-index.html

Hinweis: Dieser Artikel dient nur Kommunikationszwecken, falls vorhanden Unangemessenheit, willkommen Kritisieren und korrigieren, aber bitte geben Sie den Grund an, danke!

Da ich es normalerweise nicht verwende, hatte ich beim Schreiben von CSS in der Vergangenheit eine vage Vorstellung von den absoluten und relativen Werten des Positionsattributs und war darüber noch verwirrter Die Kaskadierung des Z-Index ist zusätzlich zu den Verständnisfaktoren auch ein großes Problem. Ich habe das CSS-Dokument heute sorgfältig gelesen und endlich ein tieferes Verständnis für das Schweben und die Positionierung des Box-Modells erlangt.

In der Praxis werden wir sehr wahrscheinlich auf solche Probleme stoßen:
1 Machen Sie eine horizontale Navigation und dann erscheint ein Dropdown-Menü, nachdem die Maus darüber gefahren ist, dann wird die Positionskontrolle dieses Dropdown-Menüs durchgeführt. Das Abwärtsmenü ist ein Schlüssel;
2. Wir möchten mehrere Blasenaufforderungen auf der Seite platzieren. Zu diesem Zeitpunkt möchten wir nicht, dass die Blasenaufforderungen das normale Dokumentlayout zerstören Ich möchte nicht, dass die Sprechblasen-Eingabeaufforderungen überall in verschiedenen Browsern zufällig positioniert werden.
3. Wenn wir ein kleines Symbol in einen normalen Text einfügen, verwenden wir normalerweise das Tag , und sein vertikales Zentrierungsproblem ist unabhängig davon, ob Sie das HTML-Attribut absmiddle oder das CSS-Attribut verwenden vertikal ausrichten oder die Höhe + Zeilenhöhe des übergeordneten Objekts verwenden, wird es in verschiedenen Browsern immer anders aussehen.

Nun, sind Sie auch auf die oben genannten Probleme gestoßen? Wenn Sie noch keine gute Lösung haben, möchten Sie vielleicht diesen Artikel weiterlesen, er könnte für Sie hilfreich sein :)
Sehen wir uns zunächst einige Wertdefinitionen des Positionsattributs an:
Position : statisch, absolut, relativ

statisch : Standardwert. Wenn das Positionsattribut nicht angegeben ist, sind die HTML-Objekte, die das Positionsattribut unterstützen, standardmäßig statisch. Dies kann folgendermaßen verstanden werden: Behandeln Sie die HTML-Seite als Dokumentstrom und die sequentielle Position jedes Tags im Quellcode ist die Präsentation Reihenfolge ihrer entsprechenden Objekte. Alle Objekte mit dem Wert static werden in der Reihenfolge der von Ihnen geschriebenen HTML-Tags gerendert.
Wie in der Abbildung unten gezeigt, ist dies eine übliche horizontale Navigation mit float:left:


relativ: Dieser Attributwert behält die Position des Objekts im Dokumentfluss bei, was bedeutet, dass es dieselbe Rendering-Methode wie statisch hat und auch belegt Die feste Position im Objekt wird nicht von nachfolgenden Objekten eingenommen oder abgedeckt. Anders als der statische Attributwert kann ein Objekt mit einer relativen Einstellung seine eigene neue Anzeigeposition durch die obere, linke, rechte und untere Position festlegen Der Wert dieser vier Attribute ist relativ zum vorherigen Objekt im Dokumentfluss. Sie können diese vier Eigenschaften frei festlegen, um sie an neue Positionen zu verschieben, ohne dass dies Auswirkungen auf andere Objekte im Dokumentfluss hat Weg:


absolut: Absolut Positionierung. Anders als relativ zieht dieser Attributwert das aktuelle Objekt aus dem Dokumentfluss und die nachfolgenden Objekte nehmen die ursprüngliche Position ein. Das heißt, das aktuelle Objekt wird unabhängig angezeigt, seine Position wird jedoch oben, links und unten angegeben. Die rechten und unteren Attribute wurden zuvor noch geerbt. Die Werte der vier Attribute sind zu diesem Zeitpunkt relativ zum Browser und haben nichts mit dem Dokumentenfluss zu tun. Wenn Sie im Beispiel den B-Bereich auf absolut setzen, ohne die vier Positionsattribute anzugeben, und seine relative Position durch Festlegen des Rands ändern, kann diese Methode das oben erwähnte Problem 2 lösen.


Invite a : Su Yu Le manuel CSS2.0 mentionne que la différence entre les barres de défilement positionnées relative et absolue n'est pas absolue. Au moins dans Firefox, Opera et Safari, la barre de défilement apparaîtra toujours

Invite b. : L'attribut z-index dont la valeur d'attribut est un objet absolu peut définir l'ordre d'affichage en cascade, qui est directement efficace
et l'attribut z-index dont la valeur d'attribut est un objet relatif doit être soigneusement défini lors de sa définition ; Changez le z-index de l'objet actuel. Le définir sur -1 ne fonctionnera pas, il ne sera pas affiché dans Firefox (attention, cela ne signifie pas que le navigateur est erroné, mais cela signifie que si l'objet parent est la racine corps de l'élément, alors z-index n'est pas valide et tout paramètre de z-index ne sera pas affiché après l'élément racine. En plus du bug d'analyse d'IE (grâce au conseil n°19), il doit être défini au-dessus de 0. Si nous voulons que d'autres objets le bloquent, nous ne pouvons définir la position des autres objets que sur relative et z. Prenez simplement une valeur plus grande pour l'attribut index

Je ne sais pas si l'expression ci-dessus n'est peut-être pas le cas. très clair. Il faut encore le faire soi-même pour le comprendre

Il semble que ce qui précède soit la réponse. Pour le problème 3, on peut le régler en positionnement relatif ou absolu. exigences de conception ;
Il existe de nombreuses solutions au problème 1. Je recommande personnellement d'utiliser les sémantiques dl, dt, dd pour y parvenir, et les performances de cette méthode sont fondamentalement les mêmes dans différents navigateurs (elle a été testée dans IE, Firefox , Opera et Safari). Il n'y a que quelques pixels de différence dans l'attribut supérieur. En raison de contraintes de temps, je ne peux donner le code que lorsque je l'ai testé. Pour référence :

corps { couleur :#fff ; taille de police : 12 px ; } ulli { flotteur : gauche ; hauteur : 30 px ; couleur d'arrière-plan : #99CC99 ; marge :0 10px ; remplissage : 0 ; bordure : 1px solide #c30 ; largeur : 100 px ; } ullidiv{ bordure : 1px solide #f00 ; couleur d'arrière-plan : #996666 ; largeur : 100 px ; hauteur : 100 px ; position : absolue ; marge supérieure : 15 px ; marge gauche : -1px ; *marge gauche : -79px ; } Ullidl, ul li dl dt, ul li dl dd { marge : 0 ; remplissage : 0 ; } ul li dl dd { bordure : 1px solide #f00 ; couleur d'arrière-plan : #996666 ; largeur : 100 px ; hauteur : 100 px ; position : absolue ; marge supérieure : 11 px ; *marge supérieure : 10 px ; marge gauche : -1px ; } <ul> <li> Titre - #texte <div> menu déroulant - div </div> </li> <li style="position:relative;">Liste b</li> <li>Liste c</li> <li> <dl> <dt>Titre - dt</dt> <dd>Menu déroulant - jj</dd> </dl> </li> </ul>
[Ctrl+A Tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez l'actualiser pour l'exécuter ]

Ajoutez un exemple, s'il vous plaît Affichage comparatif dans les navigateurs IE et non-IE :

<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"> <div class="brd">Un morceau de texte, un morceau de texte, un morceau de texte, un morceau de texte, un morceau de texte, un morceau de texte<div class="layer_a"></div> </div> <div class="brd">Un autre morceau de texteUn autre morceau de texteUn autre morceau de texte<div class="layer_b"></div> </div> <p class="brd">Troisième paragraphe de texte différentTroisième paragraphe de texte différent</p> <div class="layer_c"></div> <p class="brd block">Le quatrième paragraphe précise le texte du bloc</p> <div class="layer_d"></div> <a href="" class="brd">Le quatrième paragraphe précise le texte du bloc<div class="layer_c"></div></a> <map class="brd block">Le quatrième paragraphe précise le texte du bloc<div class="layer_d"></div></map> <dd class="brd">Le quatrième paragraphe précise le texte du bloc<div class="layer_a"></div> </dd> <li class="brd">Le quatrième paragraphe précise le texte du bloc<div class="layer_b"></div> </li> </div>
[Ctrl+A Tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez actualiser pour exécuter ]

Comme vous pouvez le voir dans cet exemple Lorsque IE positionne de manière absolue un élément de bloc, si l'élément parent est un élément de niveau bloc, il héritera toujours des coordonnées de son emplacement d'origine après avoir été retiré du flux de documents
Au lieu de ; Pour les navigateurs IE, l'approche est la suivante : glisser Après le flux du document, localisez directement les coordonnées de l'élément parent.