Heim > Web-Frontend > CSS-Tutorial > Was sind die absoluten Eigenschaften in CSS?

Was sind die absoluten Eigenschaften in CSS?

一个新手
Freigeben: 2017-10-20 09:30:37
Original
2221 Leute haben es durchsucht

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;可居中
Nach dem Login kopieren

absoulte insgesamt Layout

<header></header>
<article>
   <aside></aside>
   <main></main>
</article>
<footer></footer>
Nach dem Login kopieren


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;}
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWas sind die absoluten Eigenschaften in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage