Analyse spécifique de l'attribut absolu en CSS

Caractéristiques :

absoulte a les mêmes caractéristiques que le float : enveloppement Sexuel et destructeur
absoulte et flotteur peuvent être utilisés de manière interchangeable
non affectés par relative Restriction absolue Positionnement, performance comportementale ne peut pas être utilisée gauche/droite/haut/bouton/auto Les attributs tels que

se comportent

hors du flux de documents
pour flotter ( float et absoulte les éléments ne peuvent pas apparaître en même temps)
suivi de position (toujours dans la position d'origine)
Problème : IE7 utilise l'absoulte élément Il s'agit toujours d'un inline-block élément
Solution : envelopper une couche externe de balises sans définir d'attributs

qui peut être positionné avec précision avec marge

Prise en charge du positionnement par valeur négative
Forte compatibilité avec IE6
Forte adaptabilité, bonne maintenabilité et robustesse

Essayez d'utiliser des animations les plus similaires possibles. Sur un élément en position absolue, plusieurs éléments absoultes se chevaucheront, ce dernier étant au dessus

z -index Aucune dépendance

S'il n'y a qu'un seul élément absolu, il n'est pas nécessaire de définir
S'il y a sont deux éléments absoultes, il contrôle le flux DOM Ordre, vous n'avez pas besoin de
Positionnement multiple décalé, z-index : 1Contrôle
Élément absoulte de type non pop-up, z-index <= 2 Si redondant, à optimiser

gauche/droite/haut/bas et largeur/hauteur peuvent être remplacés les uns par les autres

left:0;right:0;    等于 width:100%;
top:0;bottom:0;    等于 height:100%;
以上IE7+支持
具有相互合作性:left:0;right:0;width:50%;margin:auto;可居中

absolu dans l'ensemble mise en page

<header></header><article>
   <aside></aside>
   <main></main></article><footer></footer>

1 header,footer{ positon:absoulte; left:0; right:0; }
2 header{ height: 50px; top: 0; }
3 footer{ height: 20px; bottom: 0; }
4 aside{ position: absoulte width: 200px; top: 0; bottom: 0; left:0; }
5 main{ position: absoulte; top: 50px; bottom: 50px; right: 0; left: 200px; overflow: auto;}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!