Spezifische Analyse des absoluten Attributs in CSS

Funktionen:

absoulte hat die gleichen Funktionen wie float : Wrap Sexuell und destruktiv
absoulte und float können austauschbar verwendet werden
nicht betroffen von relative Eingeschränkt absoulte Positionierung, Verhaltensleistung kann nicht verwendet werden links/rechts/oben/Taste/Auto Attribute wie

verhalten sich

außerhalb des Dokumentenflusses
zu float ( float und absoulte Elemente können nicht gleichzeitig erscheinen)
Position folgend (immer noch in der ursprünglichen Position)
Problem: IE7 verwendet die absoulte Element Es ist immer inline-block Element
Lösung: Umschließen Sie eine äußere Schicht von Tags ohne festgelegte Attribute

die mit Spielraum genau positioniert werden kann

Unterstützung der Positionierung negativer Werte
Starke Kompatibilität mit IE6
Starke Anpassungsfähigkeit, gute Wartbarkeit und Robustheit

Versuchen Sie, möglichst ähnliche Animationen zu verwenden. Auf einem absolut positionierten Element überlappen sich mehrere absoulte -Elemente, wobei letztere oben

z liegen -index Keine Abhängigkeiten

Wenn es nur ein absoulte-Element gibt, besteht keine Notwendigkeit,
festzulegen Sind zwei absoulte Elemente, steuert es die DOM-Flow-Sequenz, man braucht nicht
Mehrfachpositionierung versetzt, Z-Index: 1Steuerung
Nicht-Popup-Typ absoulte Element, z-index <= 2 Falls redundant, muss optimiert werden

links/rechts/oben/unten und Breite/Höhe können gegeneinander ersetzt werden

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

absoulte insgesamt Layout

<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;}

Das obige ist der detaillierte Inhalt vonSpezifische Analyse des absoluten Attributs in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!