Setarea acestei valori a proprietății la absolută va scoate obiectul din poziționarea absolută normală a fluxului documental, indiferent de structura conținutului din jurul său. Dacă alte obiecte cu proprietăți z-index diferite ocupă deja o poziție dată, acestea nu se vor afecta reciproc, ci se vor suprapune în aceeași poziție. Obiectul nu are o zonă exterioară (margine), dar are totuși o pată interioară (tapă) și o margine (margine).
Pentru a activa poziționarea absolută a unui obiect, trebuie să specifici cel puțin unul dintre atributele stânga, dreapta, sus, jos și să setezi această valoare a atributului la absolut. Altfel, atributele de mai sus vor folosi valoarea lor implicită auto, ceea ce va determina obiectul să urmeze regulile normale de layout HTML și să fie randat imediat după obiectul anterior.
Atributele TRBL (SUS, DREAPTA, JOS, STÂNGA) sunt valabile doar dacă atributul poziție este setat.
Ar trebui să setezi poziția: absolută
Dacă părintele (infinit) nu setează atributul poziție, atunci absolutul curent este poziționat în combinație cu atributul TRBL din colțul din stânga sus al browserului ca punct original
Dacă părintele (infinit) setează proprietatea poziției, atunci absolutul curent este poziționat în combinație cu proprietatea TRBL în colțul din stânga sus al părintelui (recent) ca punct original.
La setarea poziției: relativ
Colțul din stânga sus al zonei de conținut părinte (recent) este punctul original combinat cu atributul TRBL (sau decalajul față de elementul anterior al elementului poziționat în zona de conținut părinte), iar colțul din stânga sus al CORPULUI este punctul original fără părinte. Poziționarea relativă nu poate fi stratificată. Când se folosește poziționarea relativă, elementul ocupă în continuare spațiul său original indiferent dacă este mutat sau nu. Prin urmare, mutarea unui element face ca acesta să suprascrie alte casete.
În general, dacă pagina web este centrată, este ușor să faci greșeli când folosești Absolute, deoarece pagina web s-a adaptat întotdeauna automat la dimensiunea rezoluției, în timp ce Absolute va folosi colțul din stânga sus al browserului ca punct original și nu va schimba poziția din cauza schimbării rezoluției. Uneori este necesar să ne bazăm și pe indicele z pentru a stabili relația dintre partea superioară și cea inferioară a recipientului, cu cât valoarea este mai mare, cu atât partea superioară este mai mare, iar intervalul numeric este un număr natural. Desigur, un lucru de reținut este că relația părinte-copil nu poate fi setată cu indicele z, iar nivelul copilului trebuie să fie deasupra și sub cel al părintelui.
Setarea acestei valori a proprietății la relativ păstrează obiectul în fluxul HTML normal, dar poziția sa poate fi decalată în funcție de obiectul anterior. Textul sau obiectele care urmează un locator relativ ocupă propriul spațiu fără a acoperi spațiul natural al obiectului poziționat. În contrast, textul sau obiectul după poziționarea absolută ocupă spațiul său natural înainte ca obiectul țintă să fie tras departe de fluxul normal al documentului. Plasarea unui obiect de poziționare absolută în afara viewport-ului apare o bară de derulare. Plasarea unui obiect de poziționare relativă în afara zonei de vizualizare nu apare cu bara de derulare. De fapt, principala problemă cu poziționarea este să reții semnificația fiecărei poziționări. Poziționarea relativă este poziția inițială a elementului "relativ" la fluxul documentului, în timp ce poziționarea absolută este elementul strămoș care a fost poziționat "relativ" la cel mai recent.
Iată adăugirile:
Deși cunosc poziționarea absolută (absolută) și poziționarea relativă a CSS-ului, nu am scris niciodată efectele relevante singur!
După ce lucrezi mai mult de jumătate de zi, poate fi considerat complet! Am descoperit și unele dintre aceste două trăsături!
Rezumatul este următorul:
Să aruncăm o privire mai întâi la următoarea structură a straturilor
<body>
<div id=posi>
<div id=rel> Acest strat se aplică doar position:relative; Stil </div>
<div id=abs> Acest strat se aplică doar poziție: absolută; Stil </div>
<div id=sss> nu se aplică <div>stiluri
</div>
</body>
1. absolut: nu ocupă un loc, relativ: are un loc!
De exemplu, suprastructura:
Straturile cu id rel vor ocupa o linie când sunt afișate! Stratul de ABS din spate va apărea doar pe următoarea linie!
Când stratul cu ID ABS este afișat, acesta se va suprapune cu ID-ul SSS-ului din spate!
2. În mod implicit (nu poziționat în combinație cu partea de sus, etc.), absolutul (poziționarea absolută) este poziționat de stratul părinte
De exemplu, dacă stratul de mai sus cu ID este ABS, dacă nu este poziționat în combinație cu TOP, poziția sa de afișare va fi cu stratul părinte POSI (POSI este în colțul din stânga jos al documentului și va fi, de asemenea, în colțul din stânga jos)
3. Când se combină superiorul, josul, dreapta, stânga și alte atribute, absolutul (poziționarea absolută) este poziționat cu fereastra ca poziționare, iar relativul este decalat cu propria sa ocupare ca bază de bază! Așa cum urmează:
<body>
<div id=posi>
<div id=sss> nu se aplică <div>stiluri
<div id=rel> Acest strat aplică position:relative; jos:30px; Stil </div>
<div id=abs> Acest strat se aplică doar poziție: absolută; jos:30px; Stil </div>
</div>
</body>
Codul de mai sus:
Stratul cu id rel se mișcă în sus și suprapune stratul cu id SSS-ul
Stratul cu ID ABS va fi mutat într-o poziție la 30 de pixeli distanță de fereastră, având fereastra ca bază de referință!
4. Când combini atributele de sus, de jos, din dreapta, stânga și alte atribute, dacă vrei ca absolutul (poziționarea absolută) să folosească stratul părinte ca bază de poziționare, poți aplica atribute absolute sau relative pe stratul părinte! Așa cum urmează:
<body>
<div id=posi style="position:relative">
<div id=rel> Acest strat aplică position:relative; jos:30px; Stil </div>
<div id=abs> Acest strat se aplică doar poziție: absolută; jos:30px; Stil </div>
</div>
</body>
Codul de mai sus: id este stratul lui posi, poți folosi și atributul absolut!
ID-ul este stratul de REL, care nu este afectat și este compensat de propriul său loc ca bază de bază!
Stratul cu id ca ABS se bazează pe marginea inferioară a stratului POSI ca bază de poziționare; dacă înălțimea stratului POSI este mai mică de 30px în acest moment, stratul ABS s-ar putea să nu o poată vedea!
|
Postat pe 30.10.2014 14:39:28
|
|
|
