Meniul
AcasăInternet

Valoarea proprietății poziției. poziție: absolută în părintele poziționat. Interacțiunea blocurilor absolute cu elementele părinte

spațiere litere înălțime linie marjă stil listă înălțime max lățime min înălțime min lățime contur depășire poziție umplutură dreapta text-aliniere text-decor text-indentare text-transformare sus vertical-aliniere spație albă lățime spațiere cuvinte
  • Referință HTML Lecții HTML Cursuri video despre crearea de site-uri web

    • Cu proprietatea POZIȚIE

    Proprietate Valori etc* Hc*
    poziţie static, relativ, absolut, fix, moștenire + -

    Proprietatea definește schema de pozitionare a elementelor referitor la părintele său. Elemente cu absolut și poziționare fixă sunt tratate ca blocuri.

    Valori:

    static— poziționare statică, așa cum este.
    moşteni— moștenirea proprietăților de la părinte.

    Să ne uităm la valorile rămase mai detaliat.

    valoare relativă: poziţionare relativă

    Elementul este deplasat față de poziția sa cu cantitățile specificate de valorile proprietăților Bottom, Left, Right, Top. Acest lucru nu afectează dispunerea elementelor în fluxul normal care îl urmărește, ca și când nu s-ar fi deplasat.

    Element (poziție: relativ; sus: 25px; stânga: 50px; înălțime: 100px; lățime: 100px; chenar: 2px solid #000;)
    — poziționarea este setată pentru blocul cu imaginea relativși decalat de sus cu 25 px și de la stânga cu 50 px. Elementul s-a deplasat în raport cu debitul normal, în practică dublând aceste valori:

    valoare absolută: poziţionare absolută

    Un element poziționat absolut ia poziția definite de valori proprietăți Jos, Stânga, Dreapta, Sus, care specifică decalajul său în raport cu granițele părintelui.

    În plus, valoarea proprietății Poziţie elementul părinte afectează dimensiunea și poziția celui poziționat. Dacă are o valoare static sau nu există niciun părinte, atunci decalajul are loc relativ la marginile ferestrei browser. Blocurile poziționate absolut sunt excluse din fluxul normal fără a afecta amplasarea altor elemente.

    Element (poziția: absolut; sus: 25px; stânga: 50px; înălțime: 100px; lățime: 100px; chenar: 2px solid #000;)

    — similar cu exemplul anterior, se ia doar poziționarea absolută pentru element. S-a suprapus elementului anterior, offset-ul a fost măsurat de la limitele părintelui:

    Înțeles fix: poziționare fixă

    Poziția elementelor cu poziționare fixă ​​se determină în același mod ca și pentru cele poziționate absolut. Singura diferență este că acestea sunt strict legate de limitele zonei de vizualizare și nu își schimbă poziția în fereastra browserului atunci când derulați pagina.

    Utilizați valoarea fix rareori. De obicei, aceasta este meniu orizontalîn partea de sus sau de jos a paginii, ca în e-mail Yandex.

    Proprietatea Z-INDEX

    Proprietate Valori etc* Hc*
    INTEGER, auto, moștenire + -

    Proprietatea specifică plasarea unui element poziționat în raport cu axa Z. Ce înseamnă aceasta: elementele sunt stivuite unele peste altele în ordine crescătoare - decât mai multă valoare proprietățile z-index, cu cât elementul este situat mai sus. Valabil numai pentru elementele care au setată o valoare de proprietate Poziţie si diferit de static.

    Valori:

    auto— elementele sunt plasate în ordinea locației lor în codul paginii.
    moşteni- mostenirea de la un parinte.

    Element-1, .element-2, .element-3 (poziție:relativ;)
    .element-1 (z-index:3; stânga:40px; sus:50px; dimensiunea fontului:46px;)
    .element-2 ( z-index:2; stânga:50px;)
    .element-3 (z-index:1; top:-50px; font-size:76px; culoare:#999;)

    — avem o imagine ca al doilea element. Ordinea de plasare a primului și al treilea element s-a schimbat. Elementul inferior-1 a fost plasat deasupra, iar al treilea element s-a dovedit a fi „stratul” inferior:

    Bună ziua, dragi cititori ai site-ului blogului. Astăzi vom vorbi despre principii Poziționare HTML elemente cu folosind CSS Reguli de poziție (cu valori absolute, relative și fixe) și proprietăți care specifică offset-urile din stânga, dreapta, sus și jos. Vedeți steaua din colțul din stânga jos? După ce ați citit articolul până la sfârșit, veți afla cum a ajuns acolo.

    În ultimul articol am vorbit despre unul dintre cele fundamentale, care ajută la ruperea fluxului normal al succesivelor cod HTML Etichete. Vă permite să implementați, pe ce site se bazează acum în principal. Dar nu Plutește singur...

    Poziție relativă - poziționare relativă

    Există, de asemenea, Poziție, care este responsabilă pentru poziționarea etichetelor folosind foi de stil în cascadă și, de asemenea, permite rupe fluxul normal. Din punct de vedere al înțelegerii, această regulă va fi puțin mai complicată decât float-ul discutat anterior, dar cred că ne putem descurca.

    Are patru valori posibile (static | relativ | absolut | fix). Cum putem ști asta? Ei bine, desigur, din specificația, care este postată pe site-ul oficial:

    Valoarea implicită este poziție: static. Acestea. într-un flux normal, cele două reguli CSS care îl pot încălca au valori implicite de static și float:none. De îndată ce una dintre aceste valori se schimbă, fluxul normal de cod HTML în acest loc va fi întrerupt, deoarece acum această etichetă poate interacționa cu vecinii săi într-un mod complet diferit sau chiar să nu interacționeze deloc.

    Să începem cu poziționarea relativă, care va corespunde valorii poziție: relativă. După ce îl înregistrăm pentru o etichetă, vom putea seta offset-ul (poziția) pentru acest element folosind suplimentar reguli Stânga, dreapta, sus și jos(stânga, dreapta, sus și, respectiv, jos):

    Valoarea implicită pentru toate cele patru este Auto. Când specificăm poziția: regulă relativă pentru o etichetă, valorile indentării pe toate părțile sunt resetate la zero și vi se oferă posibilitatea de a le seta singur.

    Trebuie să înțelegi cum sunt setate indentările. De exemplu, stânga: 400px înseamnă indentare din partea stângă la dreapta cu suma corespunzătoare, iar sus: 100px înseamnă din partea de sus în jos. Dacă specificați valori negative pentru Stânga, dreapta, sus și jos, elementul se va deplasa în direcția opusă (de exemplu, sus este în sus și Left este la stânga).

    Să ne uităm la utilizarea relative pe un element plutit. Să avem două containere Div, pe care le vom nuanța cu diferite culori de fundal pentru claritate folosind .

    Inițial vom face ca primul container să plutească spre stânga folosind proprietatea corespunzătoare și din moment ce va fi gol, apoi îl vom da (și indentarea folosind marginea):

    text text...

    Ca rezultat, vom obține ceva de genul acesta pictură în ulei:

    Primul container, așa cum era de așteptat, plutește spre stânga. În același timp, cel de-al doilea bloc în sine nu pare să observe acest lucru (pentru că acesta), dar observă elementul de text inline care curge în jurul blocului nostru plutitor.

    Acum să adăugăm poziția: în raport cu regulile CSS pentru primul container și să setăm umplutura din stânga și de sus folosind Stânga și sus:

    text text...

    Ca rezultat, vom vedea că elementul nostru plutitor s-a mutat conform marjelor specificate:

    Observați că textul continuă să curgă în jurul lui ca și cum ar fi încă pe loc. Acestea. Multe tag-uri HTML, atunci când sunt construite, consideră că sunt la locul lor de drept (fără a lua în considerare deplasările Left și Top pe care le-am specificat în reguli).

    Dar nu toate etichetele vor face acest lucru, altfel nu am vedea nicio modificare. Cel mai apropiat strămoș cu pergament(în cazul nostru aceasta va fi eticheta Html, adică de fapt zona de vizualizare) aceste modificări vor fi observate.

    Principiul de funcționare a relativului nu este complicat, dar nu este complet clar de ce poate fi utilizat în practică. De fapt, această regulă este folosită în legătură cu poziţia absolută, iar în această formă găsește foarte mare aplicație. Dar mai întâi lucrurile.

    Poziție absolută - poziționare absolută în CSS

    Să trecem la revizuire poziționare absolută. Cel mai simplu mod de a începe să te uiți la această regulă CSS este cu un exemplu ilustrativ. Să presupunem că în interiorul containerului Div avem o etichetă Span inline, pentru care vom seta poziționarea absolută.

    Dar mai întâi, să ne uităm la această construcție fără a adăuga „poziție: absolută”. Totodată, pentru a sublinia linia Span, îi vom adăuga o înălțime, care oricum nu se va aplica, iar de data aceasta vom adăuga codul CSS, pentru modificare, nu prin constructul Head:

    Prima secundă și a treia

    Pentru Div, am setat și marginea din stânga la 100px. Ei bine, acum să vedem ce se schimbă dacă dăm etichetei noastre Span line poziționare absolută prin adăugare Reguli absolute de poziție CSS:

    #abs span( fundal:#C0FFC0; înălțime:100px; poziție:absolut; )>

    S-a întâmplat ceva ciudat. Judecând după faptul că proprietatea înălțime:100px a fost aplicată la Span, aceasta a încetat să mai fie o etichetă inline. Apoi, evident, fragmentele „primul” și „al treilea” s-au unit între ele, de parcă elementul cu cuvântul „al doilea” nu mai exista între ele. Exact așa funcționează poziționarea absolută în CSS.

    Dar haideți să privim totul punct cu punct când setați o proprietate unui element "poziție: absolută":

    1. Eticheta pentru care este specificată această regulă devine o etichetă de bloc
    2. Dimensiunile acestui bloc vor fi determinate de conținutul pe care îl conține (cu excepția cazului în care le specificați în mod explicit folosind lățimea și înălțimea).

      3. La fel ca pentru elementele plutitoare (cu Float specificat), dacă „poziție: absolut” este aplicat etichetei, efectul Margin-colapsare pentru astfel de etichete nu va apărea. Acestea. Nimeni nu îi va putea transfera indentările verticale și nici el nu le va putea transfera nimănui (nu împărtășește nimănui indentările verticale).

      Dacă vă amintiți articolul anterior din secțiunea „”, veți vedea că toate aceste trei puncte au fost observate la crearea elementelor plutitoare folosind Float.

      Prin urmare, dacă Float a fost deja setat pentru o etichetă, dar atunci a fost specificată „poziție: absolută” pentru aceasta, atunci prima este resetata de browser (este responsabil pentru analizarea codului) la None (valoarea implicită), deoarece nu are rost să implementăm două modele identice.

    3. O etichetă cu „poziție: absolut” specificată nu interacționează cu niciun alt element de cod HTML, cu excepția celui mai apropiat părinte de derulare. Toate celelalte etichete din cod pur și simplu nu observă un element cu poziționare absolută (și acest lucru poate fi văzut din exemplul nostru)

    Toate acestea sunt bune, dar cu ajutorul „absolutului” trebuie să realizăm poziționarea absolută. Ei bine, de fapt, acest lucru este de fapt adevărat. În combinație cu acesta, putem folosi aceleași patru reguli CSS: stânga, dreapta, sus și jos. Cum vor lucra cu poziționarea absolută?

    Ei vor seta în continuare un offset, dar offset-ul nu mai este relativ la poziția curentă a elementului, ci relativ la limitele containerului său.

    Și conceptul în sine container pentru elemente poziționate absolut va diferi de cel general acceptat. Din articolele anterioare, vă puteți aminti că containerul pentru eticheta HTML este fereastra de vizualizare, iar pentru toate celelalte containerul este zona de conținut părinte. Acesta nu va fi cazul unei etichete cu poziția absolută specificată.

    Cu poziționare absolută, vom putea atribui singuri containerul (va fi primul dintre strămoși care are valoarea poziției este diferită de cea statică, folosit implicit).

    Să presupunem că dacă am setat doar poziționarea absolută, dar nu am specificat nicio valoare pentru regulile Stânga, dreapta, sus și jos, atunci valoarea implicită Auto va fi folosită pentru ele și un astfel de element va rămâne la locul său (ca în ultima noastră captură de ecran). Totul ar trebui să fie clar aici.

    CSS folosește structura strămoș-copil, despre care am scris deja în detaliu în articolul despre . Sarcina noastră, atunci când definim un container pentru o etichetă poziționată absolut, va fi să găsim un strămoș cu o poziție care are o altă valoare decât static (adică atunci când a fost specificat în mod explicit).

    În exemplul nostru, nu am atribuit o poziție niciunui dintre strămoșii etichetei Span, așa că atunci când ajungem în partea de sus (eticheta Html) ne vom opri aici. Să setăm zero padding pentru exemplul discutat mai sus și să ne asigurăm că avem dreptate:

    #abs span( fundal:#C0FFC0; înălțime:100px; poziție:absolut; stânga:0; sus:0; )>

    Ca rezultat, eticheta poziționată absolut a fost apăsată pe punctul de referință zero al ferestrei de vizualizare. Dar noi suntem liberi selectați un container pentru un element cu poziția specificată absolută. Cum se poate face acest lucru?

    Combinația de poziție absolută și relativă în aspectul Div

    Ei bine, de ce să nu folosiți regula CSS „poziție: relativă” pentru asta. O vom scrie în eticheta strămoșului necesară (care va deveni în cele din urmă un container pentru un element poziționat absolut) și nu vom scrie valorile Stânga, dreapta, sus sau jos, astfel, de fapt, nu vom face nicio modificare. la poziția acestui strămoș (va rămâne în firul normal), dar atribuindu-l container și începutul raportului pentru poziționarea noastră absolută.

    Dacă scriem „rudă” pt Eticheta corporală, atunci imaginea noastră se va schimba puțin:

    Prima secundă și a treia

    Vedeți, au apărut indentări caracteristice care indică faptul că colțul din stânga sus al etichetei Body este acum luat ca punct de plecare. Rețineți că valorile implicite pentru această etichetă includ o marjă de 8 pixeli, ceea ce vedem:

    Acum, să scriem, pe lângă ceea ce sa făcut deja, „poziție: relativă” pentru containerul Div, în interiorul căruia se află eticheta Span:

    Prima secundă și a treia

    După cum vedem, imaginea s-a schimbat. În ciuda faptului că relativ este specificat atât pentru Body, cât și pentru Div, Div a devenit containerul pentru Span-ul poziționat absolut, deoarece el este primul strămoș, a cărui valoare de poziție este alta decât statică.

    Mai mult, dacă scriem și , pentru Div-ul nostru, vom vedea că zona de conținut cu căptușeala internă existentă va fi folosită ca container pentru poziționare absolută:

    #abs( fundal:#FFC0C0; margine-stânga: 100px; poziție: relativă; chenar:12px punctat #ccf; padding:20px; )

    După cum se poate vedea din exemplu, punctul de referință este situat în colțul din stânga sus în interiorul cadrului elementului (de-a lungul marginii sale interioare). De aici rezultă regula că pentru etichetele cu „poziție: relativ” (care sunt containere cu poziționare absolută), ar fi bine să nu folosiți deloc un cadru pentru a evita excesele.

    Indentări (offset) Stânga, dreapta, sus și jos pot fi setate nu numai în unități absolute (citiți despre ), ci și în procente, care vor fi luate din lățimea (stânga și dreapta) și înălțimea (sus și jos) recipient rezultat. Acestea. „sus:100%” va corespunde cu 100% din înălțimea containerului, iar „stânga:100%” va corespunde cu 100% din lățimea acestuia.

    Și am avut în vedere interacțiunea descrisă mai sus când vorbeam combinație de poziție absolută și relativă. Datorită acestui fapt, avem posibilitatea să alegem singuri containerul sau, cu alte cuvinte, punctul de plecare pentru o poziționare absolută. De ce se folosește acest link în practică?

    Pentru a implementa o sarcină similară, de exemplu, cu așa-numita Litebox pentru afișarea unei fotografii la dimensiune completă, ei pot folosi acest principiu.

    Acestea. daca ai nevoie pe pagina formează aspectul și ascunderea unui element, care, atunci când apare, nu va afecta toate celelalte etichete (interacționează cu acestea). În acest caz, apariția unui bloc poziționat absolut nu va presupune smucirea și restructurarea întregii pagini web.

    Pentru un meniu derulant, faceți ceva de genul următor. Când treceți cursorul mouse-ului (setat în CSS cu ) peste elementul de meniu rădăcină, apare un element poziționat absolut poziționat cu „absolut” (elementele de meniu imbricate create pe baza ). Această listă derulantă apare lângă elementul de meniu rădăcină din simplul motiv că poziția: relativă este specificată în ea. Toate.

    Poziție fixă ​​- se fixează în fereastra de vizualizare

    Ultima metoda de pozitionare este "poziție: fixă". Metodele discutate anterior au fost concepute pentru plasare în raport cu orice elemente de cod HTML. Dar dacă începem să derulăm pagina, atunci etichetele acesteia (chiar și cele cu poziționare absolută sau relativă) se deplasează în sus (sau în jos).

    Dar atunci când utilizați fix, acest lucru nu se va mai întâmpla. Un element pozitionat in acest fel va fi intotdeauna in aceeasi pozitie in viewport, indiferent de derularea paginii web. Probabil că ați întâlnit deja astfel de opțiuni pe site-uri web. De exemplu, un plugin destul de popular pentru WordPress numit .

    Pentru o etichetă cu poziția specificată:fixed, nimeni nu caută un container, deoarece este însuși fereastra de vizualizare. Aceasta este tocmai diferența față de „absolut”, și totul este la fel. Blocurile cu plasare fixă ​​se comportă pe măsură ce derulați pagina ca și cum ar fi elemente ale interfeței ferestrei browserului dvs. (sunt mereu la îndemână).

    În acest fel, de exemplu, sunt implementate bare de instrumente, panouri derulante cu posibilitatea de a lăsa feedback etc. lucruri. Ca exemplu pe această pagină Am stabilit poziția: fixă ​​pentru o poză micăîn colțul din stânga jos al ecranului (vizualizare):

    Asta e tot pentru astăzi, în următorul articol vom vorbi despre , care este aplicabil doar elementelor de cod deja poziționate, adică. pentru care sunt specificate fie fixe, relative sau absolute.

    Multă baftă! Ne vedem curând pe paginile site-ului blogului

    Puteți viziona mai multe videoclipuri accesând
    ");">

    S-ar putea să fiți interesat

    Poziționare cu Z-index și CSS Regula cursorului pentru a schimba cursorul mouse-ului
    Float și clar în CSS - instrumente aspectul blocului
    Stil listă (tip, imagine, poziție) - reguli Css pentru personalizarea aspectului listelor în cod HTML
    Afișare (blocare, niciunul, inline) în CSS - setați tipul Afișare HTML elemente de pe o pagină web
    Pentru ce este CSS, cum să conectați foile de stil în cascadă la un document HTML și sintaxa de bază a acestui limbaj

    Două instrumente principale sunt adesea folosite pentru aspectul paginii - poziționareȘi libera circulatie (plutitoare). Poziționarea CSS vă permite să specificați unde apare caseta unui element, iar flotarea liberă mută elementele la marginea stângă sau dreaptă a casetei containerului, permițând restului conținutului să „curgă” în jurul acestuia.

    Poziționarea și mișcarea liberă a elementelor

    1. Tipuri de poziţionare

    Proprietatea de poziție vă permite să specificați cu precizie noua locație a blocului în raport cu locul în care s-ar afla în fluxul normal al documentului. În mod implicit, toate elementele sunt aranjate secvenţial unul după altul în ordinea în care sunt definite în structura documentului HTML. Proprietatea nu este moștenită.

    poziţie
    Sens:
    static Valoarea implicită înseamnă nicio poziționare. Elementele sunt afișate secvenţial unul după altul, în ordinea în care sunt definite în documentul HTML. Folosit pentru a șterge orice altă valoare de poziționare.
    relativ Un element poziționat relativ este mutat din locația sa normală în direcții diferite față de limite container părinte, iar spațiul pe care îl ocupa nu dispare. Cu toate acestea, un astfel de element se poate suprapune cu alt conținut de pe pagină.

    Dacă pentru un element relativ poziționat setați proprietățile sus și jos sau stânga și dreapta în același timp, atunci în primul caz va funcționa numai sus, în al doilea - stânga.

    Poziționarea relativă vă permite să setați un index z pentru un element, precum și să poziționați absolut elementele copil într-un bloc.
    absolut Un element poziționat absolut este eliminat complet din fluxul de documente și poziționat în raport cu limitele blocului său container (alt element sau fereastră de browser). Blocul container pentru un element poziționat absolut este cel mai apropiat element strămoș a cărui valoare a proprietății de poziție nu este statică.

    Locația marginilor elementului este determinată folosind proprietățile offset. Spațiul pe care l-a ocupat un astfel de element se prăbușește ca și cum elementul nu ar exista pe pagină. Un element poziționat absolut se poate suprapune sau poate fi suprapus de alte elemente (datorită proprietății z-index). Orice element poziționat absolut generează un bloc, adică preia afișarea valorii: bloc; .
    fix Fixează un element într-o locație specificată pe pagină. Blocul container al unui element fix este fereastra de vizualizare, adică elementul este întotdeauna fix în raport cu fereastra browserului și nu își schimbă poziția în timpul derulării paginii. Elementul în sine este complet eliminat din fluxul de document principal și creat într-un flux de document nou.
    iniţială Setează valoarea proprietății la valoarea implicită.
    moşteni Moștenește valoarea proprietății de la elementul părinte.

    Orez. 1. Diferența dintre poziționarea statică, relativă și absolută

    2. Proprietăți offset

    Proprietățile descriu decalajul față de cea mai apropiată parte a blocului container. Setați pentru elementele pentru care valoarea proprietății de poziție nu este statică. Ele pot lua atât valori pozitive, cât și negative. Nu moștenit.

    Pentru proprietatea de sus, valorile pozitive mută marginea superioară a elementului poziționat dedesubt, iar valorile negative mută marginea superioară a blocului său container. Pentru proprietatea din stânga, valorile pozitive mută marginea elementului poziționat la dreapta, iar valorile negative mută marginea elementului poziționat la stânga. Adică, valorile pozitive mută elementul în interiorul blocului container, iar valorile negative îl mută în afara acestuia.

    3. Poziţionarea în cadrul unui element

    Pentru blocul container al unui element poziționat absolut, proprietatea poziție: relativă este setată fără decalaje. Aceasta permite poziționarea elementelor într-un element container.

    .wrap (padding: 10px; înălțime: 150px; poziție: relativ; fundal: #e7e6d4; text-align: right; chenar: 3px punct #645a4e; ) .white (poziție: absolut; lățime: 200px; sus: 10px; stânga : 10px; umplutură: 10px; fundal: #ffffff; chenar: 3px punctat #312a22; )
    Orez. 2. Poziţionare relativă absolută

    4. Probleme de poziţionare

    1. Dacă lățimea sau înălțimea unui element poziționat absolut este setată la auto , atunci valoarea acestuia va fi determinată de lățimea sau înălțimea conținutului elementului. Dacă lățimea sau înălțimea este declarată în mod explicit, atunci aceasta este valoarea care va fi atribuită.
    2. Dacă în interiorul unui bloc cu poziție: absolut există elemente pentru care este setat plutitorul, atunci înălțimea acestui element va fi egală cu înălțimea celui mai înalt dintre aceste elemente.
    3. Pentru un element cu poziție: absolută sau poziție: fixă, nu puteți seta simultan proprietatea float, dar pentru un element cu poziție: relativ puteți.
    4. Dacă strămoșul elementului poziționat este un element bloc, atunci containerul bloc este format din zona de conținut delimitată de chenar. Dacă strămoșul este un element inline, blocul container este format de limita exterioară a conținutului său. Dacă nu există un strămoș, blocul container este elementul corpului.

    5. Libera circulatie a elementelor

    În ordinea normală, elementele bloc sunt redate pornind de la marginea de sus a ferestrei browserului și lucrând spre marginea de jos. Proprietatea float vă permite să mutați orice element, aliniindu-l la marginea stângă sau dreaptă a paginii web sau elementul container care îl conține. În acest caz, alte elemente de bloc îl vor ignora și elemente inline se va deplasa la dreapta sau la stânga, eliberând spațiu pentru el și curgând în jurul lui.

    Orez. 3. Libera circulatie a elementelor

    Un bloc plutitor preia dimensiunile conținutului său, ținând cont de umplutură și chenare. Marginile de sus și de jos ale elementelor plutitoare nu se prăbușesc. Proprietatea float se aplică atât elementelor bloc, cât și elementelor inline.

    Marginea exterioară stângă sau dreaptă a unui element deplasat, spre deosebire de elementele poziționate, nu poate fi situată la stânga (sau la dreapta) a muchiei interioare a blocului său container, de exemplu. depășește limitele sale. Mai mult, dacă blocul container este setat la căptușeală, atunci blocul plutitor va fi distanțat de marginea blocului container la o distanță specificată.

    Proprietatea modifică automat valoarea calculată (afișată în browser). proprietăți de afișare de afișat: bloc pentru următoarele valori: inline , inline-block , table-row , table-row-group , table-column , table-column-group , table-cell , table-caption , table-header-group , table - subsol-grup . Valoarea tabelului inline se modifică în tabel .

    Proprietatea nu are efect asupra elementelor cu display: flex și display: inline-flex .

    Când utilizați proprietatea float pe elementele bloc, asigurați-vă că specificați o lățime. Acest lucru va crea spațiu pentru alt conținut în browser. Dar dacă lățimea combinată a tuturor coloanelor este mai mare decât spațiul disponibil, atunci ultimul element va coborî.

    În același timp, marginile verticale elemente raționalizate nu se prăbușește cu umplutura elementelor adiacente, spre deosebire de elementele bloc obișnuite.

    6. Anulați fluxul în jurul elementelor

    6.1. proprietate clară

    Proprietatea clear determină modul în care va fi poziționat elementul care urmează elementul plutitor. Proprietatea anulează float pe una sau ambele părți ale elementului care este stabilit de proprietatea float. Pentru a preveni afișarea fundalului sau a marginilor sub elementele plutitoare, utilizați regula (depășire: ascuns;).

    6.2. Curățarea unui flux cu stiluri folosind clasa clearfix și pseudo-clasa :after

    Să presupunem că aveți un container bloc pentru care lățimea și înălțimea nu sunt specificate. În interiorul acestuia este plasat un bloc plutitor cu dimensiuni specificate.

    .container ( umplutură: 20px; fundal: #e7e6d4; chenar: 3px punctat #645a4e; ) .floatbox (float: stânga; lățime: 300px; înălțime: 150px; margine-dreapta: 20px; umplutură: 0 20px; fundal: #ffffff ; chenar: 3px punctat #666666; ) Orez. 4. „Efectul de colaps” al blocului container

    Soluție pentru problemă:
    Creăm clasa .clearfix și, în combinație cu pseudo-clasa :after, o aplicăm blocului container.

    .container ( umplutură: 20px; fundal: #e7e6d4; chenar: 3px punctat #645a4e; ) .floatbox (float: stânga; lățime: 300px; înălțime: 150px; margine-dreapta: 20px; umplutură: 0 20px; fundal: #ffffff ; chenar: 3px punctat #666666; ) .clearfix:după (conținut: „”; afișare: bloc; înălțime: 0; clar: ambele; vizibilitate: ascuns; )

    A doua opțiune pentru ștergerea fluxului:

    Clearfix:după (conținut: „”; afișare: tabel; șterge: ambele; )
    Orez. 5. Aplicarea metodei de „curățare” unui bloc container care conține un element plutitor

    6.3. O modalitate ușoară de a curăța un flux

    Există un alt truc pentru a curăța fluxul pentru un element care conține elemente plutitoare, cum ar fi o listă orizontală cu marcatori:

    Ul ( margine: 0; stil listă: niciunul; umplutură: 20px; fundal: #e7e6d4; overflow: automat; ) li ( float: stânga; lățime: calc(100% / 3 - 20px); înălțime: 50px; margin- dreapta: 20px; fundal: #ffffff; chenar: 3px punctat #666666; ) li:last-child (marja-dreapta: 0;) Fig. 6. Curățarea fluxului de listă orizontal

    Eu, ca și autorul articolului, am ajuns la o mulțime de lucruri în CSS la întâmplare și am ratat și mai multe. Mai ales timpul. Și dacă aș fi înțeles imediat principiile unor lucruri precum poziționarea și plutirea, atunci sarcini simple ar fi fost într-adevăr simplu de la bun început. În acest scop, adesea nu există suficiente locuri în care conflictele și anomaliile acelor limbaje de programare pe care brusc nu ni se învață încă din copilărie ni se explică în degete. Ei bine, nu ne sunt clare la nivel intuitiv, deci ce. Da, iar ajutoarele nu sunt întotdeauna citite.

    Dacă aveți aceeași poveste, atunci aceasta este lectura dvs. pentru seară.

    Una dintre revelațiile care mi-au venit după ce am citit-o a fost înțelegerea modului în care funcționează poziționarea, în special diferența dintre absolut și relativ (absolut, relativ). Dacă citești până la sfârșit, vei ști exact când și cum funcționează fiecare. Totul este prezentat aici folosind exemple de liste și imagini.

    Cinci valori de poziționare

    În CSS avem o listă de cinci valori de poziție pentru elementele blocului div:

    1. Static - static.
    2. Relativ - relativ.
    3. Moștenire - moștenit.
    4. Fix - fix.
    5. Absolut - absolut.

    Să eliberăm puțin drumul prin îndepărtarea moşteni, pur și simplu pentru că această proprietate de poziționare nu necesită o analiză suplimentară. Îi spune elementului să moștenească proprietățile părintelui său și asta este tot. Și în versiunile mai vechi de Internet Explorer nu este acceptat deloc.

    În mod implicit, poziționarea este setată la static. Orice element cu poziționare statică va fi acolo unde este așteptat, fiind complet dependent de structura HTML-ului.

    Acum fix. Aceasta este o astfel de ancoră. Când sunt echipate cu această valoare, elementele vor rămâne acolo unde le așezăm și nu se vor clinti nici măcar atunci când sunt derulate. Acesta este adesea folosit pentru a îngheța barele laterale de navigare, ceea ce este groaznic pentru conținut.

    Deci, ne-am dat seama de cele trei valori de poziționare și le putem considera de înțeles. Pur și simplu pentru că funcționalitatea lor nu are repetări sau variații. Raman lucruri interesante - absolutȘi relativ. Să ne uităm la ele individual și apoi la modul în care pot fi folosite împreună. Și, de asemenea, ce rezultate interesante poate da asta.

    Poziționare absolută

    Poziționarea absolută vă permite să scoateți un obiect din fluxul normal al documentului și să-l plasați într-un anumit punct al paginii. Să creăm o listă simplă - listă neordonată.

    • PATRU

    După cum știm, articolele sale sunt deja în valoarea statică, automat. Aceasta înseamnă că acestea curg în fluxul altor elemente ale documentului unde sunt plasate conform structurii sale html. Acum să vedem ce se întâmplă dacă atribuiți unul dintre elementele listei absolut cu coordonate zero.

    >ul li:nth-child(4)(
    poziție: absolut;
    stânga:0; sus:0;)

    După cum puteți vedea, este aruncat din fluxul general și plasat în colțul din stânga sus al ferestrei browserului. Rețineți că unui element poziționat absolut nu îi pasă dacă există altul în acel loc sau nu. Tot va fi amplasat conform coordonatelor.

    Deci, avem nevoie de o poziționare absolută atunci când trebuie să plasăm un element exact în locul de pe ecran unde vrem să-l vedem. În consecință, poziția sa este măsurată prin indentări în partea de sus, dreapta, jos și stânga a marginii ferestrei.

    De exemplu, să plasăm același al patrulea element din listă cu o indentație de douăzeci de pixeli în stânga și douăzeci în partea de sus.

    ul li:nth-child(4)(
    poziție: absolut;
    stânga: 20 px; top: 20 px;)

    Mișcat puțin în jos și la dreapta. Și pentru a confirma ceea ce s-a spus că un element cu poziționare absolută nu face diferență față de locația altora, îi vom da astfel de coordonate care să asigure o coliziune uniformă.

    ul li:nth-child(4)(
    poziție: absolut;
    stânga: 60 px; top: 80 px;)

    În concluzie, să notăm comportamentul elementelor rămase din listă. Când al patrulea este eliminat din flux, restul sunt aliniați automat în coadă ca și când nu ar fi acolo: al treilea este urmat imediat de al cincilea. Să ne amintim acest lucru și apoi să îl folosim în avantajul nostru.

    Poziționare relativă

    Poziționarea relativă funcționează în același mod ca poziționarea absolută, oferind unui obiect poziția sa folosind coordonatele sus, dreapta, jos și stânga. Singura diferență este punctul de plecare: poziția punctului de coordonate zero. Pentru poziționarea absolută, era marginea ecranului browserului. Și pentru rudă?

    Să vedem:

    ul li:nth-child(4)(
    poziţie: relativ;
    stânga: 0 px; top: 0 px;)

    • PATRU

    Cum așa? Al patrulea punct a rămas la locul său în fluxul de elemente. Acest lucru se datorează faptului că punctul de plecare pentru coordonatele sale nu este acum marginea ferestrei browserului, ci elementul care îl precede în flux. El este și părintele lui.

    Acum, dacă schimbăm poziția subiectului nostru experimental cu douăzeci de pixeli, vom evalua clar rezultatul unei astfel de relații.

    ul li:nth-child(4)(
    poziţie: relativ;
    stânga: 20 px; top: 20 px;)

    Această extremă poate fi utilă în situații reale. De exemplu, când nu vrem să aruncăm un element, ci vrem să ne jucăm cu plasarea lui pe alții. Cu toate acestea, rețineți că poziționarea relativă nu ține cont de elementele inferioare în același mod ca poziționarea absolută. Dar aici nu mai iau locul celor plecați.

    Punând totul împreună

    Acum că am învățat regulile de bază pentru comportamentul elementelor HTML cu poziționare absolută și relativă prin CSS, să creăm o versiune completă și exemplu clar munca întregii chestii.

    HTML

    Să începem prin a crea un bloc HTML al clasei „fotografie” și să punem imediat o imagine de 200x200 pixeli în el.



    Acum este timpul să trecem la editarea CSS-ului nostru.

    CSS de bază

    Mai întâi, să schimbăm fundalul în întuneric. Apoi vom adăuga stiluri de bază fotografiei: îi vom da un cadru și vom adăuga umbre.

    corp ( fundal: #69C; )

    Fotografie (
    chenar: 5px alb solid;
    înălțime: 200px; lățime: 200px;
    marja: 50px automat;

    /*umbre dificile, dar reci*/
    -webkit-

    box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
    }

    Ei bine, în general, iată imaginea noastră. Nimic special, dar terenul de antrenament a fost creat.

    Agățați o bandă de bandă

    Să o spunem astfel: vrem să creăm impresia că fotografiile sunt lipite de perete cu bucăți de bandă. Pentru a face acest lucru, trebuie să arătăm ceea ce am învățat deja și să adăugăm un pseudo-element.

    În primul rând, pentru a ne crea filmul, folosim pseudo-elementul „înainte” „:înainte”. Setările sale CSS vor spune benzii să aibă douăzeci de pixeli înălțime și o sută de pixeli lungime. În plus, cu un fundal alb, căruia i se atribuie o opacitate de cincizeci la sută, este film. Ei bine, Tenya, unde am fi fără ea?

    Foto: înainte (
    continut: „scotch”;
    înălțime: 20px;
    lățime: 100px;




    }

    Da, aici filmul nu se va lipi de nimic în afară de el însuși...

    Este evident că avem probleme cu poziționarea pseudo-elementului. Să încercăm să corectăm situația folosind poziționarea relativă.

    Foto: înainte (
    continut: „scotch”;
    înălțime: 20px;
    lățime: 100px;
    fundal: rgba(255,255,255,0,5);

    poziţie: relativ;
    top: 0 px; stânga: 0 px;

    Webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
    }

    Grozav. Ce efect...

    După cum puteți vedea, nu am rezolvat problema. Ei bine, din moment ce poziționarea relativă nu a funcționat, să trecem la direcție opusăși hai să încercăm absolutul.

    Foto: înainte (
    continut: „scotch”;
    înălțime: 20px;
    lățime: 100px;
    fundal: rgba(255,255,255,0,5);

    poziţie: absolut;
    top: 0 px; stânga: 0 px;

    Webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
    }

    Dar asta este mai aproape de subiect.

    În cele din urmă, banda a luat forma comandată. Dar deocamdată se plictisește într-un colț. O schimbare a coordonatelor se sugerează imediat pentru a o muta acolo unde avem nevoie. Dar aceasta nu este o soluție: banda va sta la un anumit punct și va începe să se miște odată cu schimbarea dimensiunii ecranului.

    Ei bine, am încercat atât relativ, cât și absolut pentru poziționare. Dar nu suntem încă mulțumiți nici de una, nici de alta ca soluție.

    Ce urmeaza? Și, de exemplu, povestea despre poziționarea absolută a elementelor nu este completă. Vedeți, colțul din stânga sus al ecranului nu este întotdeauna punctul de coordonate zero pentru un element poziționat absolut. În schimb, pseudo-elementul nostru „absolut” va fi orientat de la primul strămoș nestatic. ÎN în acest caz,- din fotografie.

    Ce obținem din asta? Multe: putem folosi poziționarea absolută pentru bandă. Dar înainte de asta, trebuie să schimbăm ceva despre părintele lui, despre fotografie. Și deoarece nu dorim ca banda să se miște arbitrar pe fotografie în funcție de rezoluția ecranului, îi vom aplica o poziție relativă.

    Fotografie (
    chenar: 5px alb solid;
    înălțime: 200px;
    lățime: 200px;
    marja: 50px automat;
    poziţie: relativ;


    -moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
    box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
    }

    Foto: înainte (
    continut: „scotch”;
    înălțime: 20px;
    lățime: 100px;
    fundal: rgba(255,255,255,0,5);
    poziţie: absolut;
    top: 0 px; stânga: 0 px;

    Webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
    }

    Deci, un pseudo-element cu poziționare absolută a ales colțul din stânga sus al primului dintre strămoșii nestatici ca punct de referință pentru coordonatele sale. Și anume, unghiul fotografiei se potrivește exact cu această descriere. Deci banda va fi întotdeauna lipită de acest colț, chiar dacă dimensiunea ferestrei browserului se schimbă.

    Acum că am găsit punctul de plecare, putem muta banda în locația de care avem nevoie ajustând valorile din stânga și de sus. Notați valoarea negativă pentru punctul de sus. Privind rezultatul, veți înțelege de ce. Valoarea din stânga este setată pentru a centra banda pe orizontală. Cineva „Calculator instant” va arăta clar cum se calculează.

    Foto: înainte (
    continut: "";
    înălțime: 20px;
    lățime: 100px;
    fundal: rgba(255,255,255,0,5);
    poziţie: absolut;
    top: -15 px; stânga: 50 px;

    Webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
    }

    După cum putem vedea din imaginea finală, combinația de poziționare absolută și relativă ne-a oferit exact ceea ce aveam nevoie pentru a implementa efectul dorit și pentru a înțelege cum funcționează aceste două proprietăți.

    Consultați și Tinkerbean. În esență, acesta este un generator util de coduri pentru diferite efecte.

    Concluzie

    Plasarea elementelor bloc poate fi o sarcină cu adevărat provocatoare fără a stăpâni conceptele de bază ale acesteia. Cu toate acestea, trebuie să aveți în vedere doar trei lucruri pentru a aplica și combina parametrii acestora în timp.

    Prima este că poziționarea relativă vă permite să vă aliniați cu un anumit punct de plecare. Al doilea este că puteți configura și în raport cu primul strămoș non-static și nu doar marginea ferestrei browserului, așa cum se întâmplă cu valoarea "poziție: niciuna". Și în sfârșit: nici poziționarea relativă, nici absolută a unui obiect nu afectează obiectele statice și fixe din jurul acestuia. Să ne amintim de la începutul articolului: elementele poziționate absolut sunt îndepărtate din flux, iar cele relative iau pozițiile altora.

    Note

    • Telefoanele mobile și tabletele învechite nu percep bine parametrul de poziționare "fix". Sau, mai degrabă, nu o percep. Meniurile cărora le este atribuit alunecă pe ecran împreună cu conținutul ca și cum ar fi "static". Odată cu apariția iOS 5+, totul a revenit la normal, dar nu înainte.
    • Modul în care totul scris aici a fost perceput, de exemplu, de a șaptea Internet Explorer— Nici nu vreau să discut. A existat și mai puțină dorință de a se gândi cum să piratați CSS pentru asta. Prin urmare, pentru ghoul, am făcut capturi de ecran cu toată frumusețea și le-am codificat în HTML cu constructe precum:


      Сюда тупо скрин для Эксплорера.


      Și aici este codul complet pentru browserele normale.

      Deci, dacă nu ești prea leneș să postezi soluțiile folosind doar CSS, atunci comentariile sunt la dispoziție. Să salvăm lumea.

    Bună ziua, dragi cititori ai blogului! Este timpul să adăugați altele noi materiale utile iar astăzi ne vom familiariza cu modul în care puteți diversifica plasarea diferitelor elemente pe pagină folosind poziția proprietății de poziționare cu diverși parametri(static, relativ, absolut, fix).

    De asemenea, în cadrul subiectului discutat mai sus, vom lua în considerare modul în care puteți seta una sau alta indentare la dreapta, la stânga, în sus sau în jos, utilizând proprietățile corespunzătoare stânga, dreapta, sus și jos, atribuindu-le valorile numerice necesare .

    Permiteți-mi să vă reamintesc că putem considera orice pagină web ca fiind comandată. Ele determină aspectul unui anumit element, dar locația lor este dictată de un set de reguli pentru foile de stil în cascadă, care creează în cele din urmă o imagine completă.

    Determinarea poziției elementului și a poziționării normale (poziție statică)

    Pentru proprietate poziția are patru valori (statică | relativă | absolută | fixă), care determină metoda de poziţionare. După cum probabil știți, parametrii aproape tuturor regulilor CSS pot fi adunați din pagina oficială de specificații W3, unde Set complet proprietățile și valorile acestora, inclusiv poziția:


    Poziționarea este locația unui element într-un sistem de coordonate. Pe baza valorilor proprietății poziției, pot fi distinse patru tipuri de poziționare: normală, absolută, relativă și fixă.

    Folosind poziția și pe cele pe care le-am menționat mai sus stânga, dreapta, sus, jos (inclinații, respectiv stânga, dreapta, sus, jos) puteți ajusta poziția elementelor unul față de celălalt, le puteți fixa într-un anumit loc sau chiar suprapuneți un element pe altul.

    Mai mult, poziționarea poate fi controlată prin scripturi. Acest lucru face posibilă adăugarea de dinamică oricărui element, precum și crearea de animație și alte efecte.

    Dacă poziția lipsește sau este setată la static, elementul este redat normal ca parte a fluxului HTML. Adică, toate componentele paginii web sunt afișate în secvența care este prezentă în cod sursa pagini.

    Pentru a rezuma, observ că alte valori decât cele statice vă permit să schimbați aranjarea standard a elementelor web pe pagină, ceea ce este foarte important în lumina rezolvării problemelor de aspect non-triviale. Apropo, un alt instrument care poate schimba ordinea obișnuită este cu ajutorul căruia puteți crea elemente plutitoare.

    Poziție absolută

    Deci, să continuăm analiza nuanțe tehnice poziționarea absolută, care este determinată de parametrul absolut al proprietății de poziție:

    Poziție: absolută

    Este important să înțelegeți că în acest caz elementul nu va fi afișat pe fluxul standard. În consecință, avem posibilitatea de a determina locația sa în sistemul de coordonate absolut setând indentări de la marginile ferestrei browser folosind stânga, dreapta, sus, jos:


    Aici A, B, C și D sunt valorile numerice ale liniuțelor. Acum să ne uităm la caracteristicile valorii absolute: exemplu concret. Să luăm 2 cu cele corespunzătoare, cărora le vom atribui parametrii (culoarea fundalului), lățimea (lățimea) și înălțimea (înălțimea). Pentru simplitate, vom folosi , care este implementat folosind atributul style.

    Spre deosebire de stilurile legate, care sunt cele mai optime în practică, această metodă presupune plasarea regulilor CSS nu într-un fișier separat, ci sub forma valorilor atributelor STYLE atribuite etichetei dorite. În același timp, pentru puritatea experimentului, nu vom adăuga poziția absolută deocamdată:

    Poziționarea elementelor HTML

    Am spus deja puțin mai sus că absența unei poziții implicite este echivalentă cu faptul că parametrul static este specificat pentru această proprietate. Adică, toate elementele sunt afișate în secvența obișnuită. În consecință, în cazul nostru, containerele vor fi aranjate în ordine (în fluxul HTML standard):


    Permiteți-mi să vă reamintesc că există o regulă pentru organizarea și optimizarea foilor de stil în cascadă în CSS: elemente copil proprietățile părinților. Prin urmare, în acest caz, etichetele bloc ocupă o poziție cu umplutură zero și în cadrul elementului părinte.


    Ce s-a întâmplat? După aplicarea poziționării absolute la element specific toate celelalte blocuri ale paginii web încetează să-l „observe” și se comportă ca și cum nu ar exista. Mai mult, nu am indicat încă valorile offset folosind stânga, dreapta, sus și (sau) jos.

    Și în acest caz, după aplicarea parametrului absolut, elementul web rămâne pe loc, în timp ce vecinul său (în exemplul nostru, blocul colorat de jos) se mișcă în sus. Ca urmare, un element este suprapus altuia. Să încercăm acum să specificăm marja din stânga pentru un element web poziționat absolut left:0, ca rezultat obținem acest lucru:


    Deci, dacă specificați o valoare zero pentru umplutură, atunci elementul web cu parametrul de poziționare absolută va depăși părintele și va rămâne la marginea ferestrei browserului. În funcție de setul de proprietăți (stânga, dreapta, sus, jos) aceasta va fi limita din stânga, dreapta, sus sau jos.

    Mai mult, trebuie menționat că stânga are un avantaj față de dreapta, iar sus față de jos. Dacă sunt în conflict între ele, atunci valorile dreptului și, respectiv, jos sunt ignorate. Sa trecem peste. Urmatorul pas Să scriem o valoare pozitivă pentru partea stângă a containerului de sus:


    În acest caz, va exista un decalaj la dreapta față de marginea din stânga a ferestrei de vizualizare, care este definit de etichetă document HTML. Să sistematizăm și să notăm punct cu punct câteva caracteristici ale comportamentului unui element web atunci când îi atribuim o poziție absolută:

    • Dacă dimensiunile blocului nu sunt specificate în mod explicit prin lățime și înălțime, atunci acestea vor corespunde dimensiunilor conținutului, inclusiv valorile de chenar și de umplutură;
    • Un element web nu își va schimba poziția dacă nu are specificate valori stânga, dreapta, sus sau jos;
    • După cum sa spus deja, stânga are mai mult prioritate ridicatăînainte dreapta și sus înainte de jos;
    • Dacă atribuiți o valoare negativă din stânga sau de sus unui element, blocul va ieși în afara ferestrei de vizualizare. Bara de defilare nu va apărea. Această nuanță poate fi folosită pentru a elimina un element web din vizibilitate;
    • Dacă stânga este specificată cu o valoare mai mare decât lățimea ferestrei de vizualizare sau dacă dreapta este specificată ca valoare negativă, atunci defilare orizontală. Același lucru este valabil și pentru perechea de sus și de jos;
    • Lățimea unui bloc poziționat absolut este formată folosind stânga și dreapta, totuși, numai atunci când lățimea nu este specificată. În mod similar, înălțimea unui element este formată folosind partea de sus, de jos și de înălțime;
    • Un element web cu parametrul absolut se deplasează simultan cu pagina când este derulată

    Cred că am rezolvat totul în ceea ce privește poziționarea absolută și poți determina singur ce uz practic elementele cu această proprietate pot avea. Cu toate acestea, ca informație, voi spune că folosind proprietatea poziție cu valoarea absolută, puteți crea blocuri cu cadre adăugând o regulă de overflow cu parametrul auto. Există, de asemenea, opțiunea de a obține sfaturi pentru fotografii sau imagini.

    Poziția relativă

    Dacă un element cu o proprietate de poziție căruia i se atribuie parametrul relativ este setat la stânga, la dreapta, sus sau jos, acesta își va schimba locația față de poziția inițială. Mai mult, o valoare pozitivă din stânga mută elementul web la dreapta marginii sale din stânga, iar o valoare negativă mută elementul web spre stânga. Deplasări similare apar la aplicarea proprietății de sus, numai în plan vertical (în cazul unei valori pozitive în jos, negativ - în sus):


    Pentru un exemplu care va ajuta la demonstrarea clară a efectului acestui tip de proprietate de poziție, să luăm două containere, dintre care unul va fi mutat la stânga folosind proprietatea float:left, iar conținutul text al celui de-al doilea container va curge în jurul valorii de acest bloc. Pentru claritate, să dăm acestor elemente un fundal, dimensiuni folosind lățimea și înălțimea, precum și marginile necesare folosind proprietatea marginii:

    Text...

    Va arata asa:


    Acum adăugăm poziție relativă la regula CSS pentru primul bloc, precum și decalaje la dreapta (stânga) și în jos (sus), astfel încât poziționarea relativă să producă rezultatul:

    Text...

    Ca rezultat, aspectul rezultat va fi astfel:


    După cum puteți vedea, blocul s-a deplasat parametrii dați. Cu toate acestea, elementul adiacent nu a reacționat la acest lucru și textul încă curge în jurul containerului mutat ca și cum ar fi rămas la locul său inițial.

    Cu ajutorul exemplului oferit, cred că este clar cum funcționează poziționarea relativă, totuși, aplicarea practică în formă purăîi este greu să găsească. Din acest punct de vedere, este mult mai solicitată varianta de interacțiune între parametrii absoluti și relativi, despre care vom discuta mai jos.

    Folosind poziția absolută și relativă împreună

    Acum să luăm în considerare ce rezultate pot fi obținute prin utilizarea a două tipuri de poziționare în combinație. Dacă atribuiți valoarea relativă elementului părinte și absolută elementului copil, atunci sistemul de coordonate va fi înlocuit și locația elementului web copil va fi determinată în raport cu părintele său:


    Ca exemplu de utilizare practică a acestei combinații de două tipuri de poziționare, vă voi oferi blogul meu, unde am implementat recent suprapunerea unui titlu și a unei descrieri pe imaginea antetului. Initial poza a aratat asa:


    Pentru a implementa sarcina, am făcut următoarele. Mai întâi, am scris în STYLE.CSS al temei mele proprietatea de poziție relativă pentru clasa „site-header” a etichetei părinte HEADER:

    De asemenea, pentru o ieșire corectă, a trebuit să determin lățimea blocului cu clasa „descrierea site-ului”, specificând valoarea lățimii:


    Apoi, pentru clasa „site-branding” a containerului copil DIV, am specificat poziționarea absolută și am specificat marginile din stânga și de sus, care vor determina locația elementului în acest caz nu în termeni absoluti (în raport cu fereastra browserului) , dar relativ la locația părintelui.

    De asemenea, a fost necesar să eliminați proprietatea „text-align:center” din setul de reguli CSS pentru această etichetă pentru a alinia titlul și textul de descriere la stânga. Ca urmare a acestei interacţiuni de poziţionare relativă şi absolută, problema a fost rezolvată şi textul solicitat sub forma unui titlu de blog și descriere a fost suprapusă pe imaginea antetului:


    Pe lângă exemplul pe care l-am propus, se poate implementa utilizarea relației absolute relativ caz general astfel de sarcini care presupun apariția și dispariția anumitor elemente web. Mai mult, în acest caz nu vor interfera cu afișarea corectă a restului componente pagini web.

    Un caz special ar putea fi, de exemplu, crearea unui meniu derulant pe un site web. Funcționează așa. Dacă mutați cursorul mouse-ului la elementul din meniul principal, apare un bloc poziționat absolut, realizat pe bază HTML standard. Aspectul său este asigurat de faptul că parametrul relativ al proprietății de poziție este atribuit etichetei corespunzătoare.

    poziție fixă

    Ei bine, ultimul parametru al proprietății de poziție ajută la fixarea elementelor web necesare pe pagină. În principiu, acest tip de poziționare seamănă foarte mult cu poziționarea absolută, singura diferență fiind că un element cu o valoare fixă ​​este atașat unei anumite zone de pe ecran din fereastra browserului folosind stânga, dreapta, sus, jos. Rămâne pe loc chiar și atunci când derulați pagina.

    Un exemplu foarte ilustrativ ar fi materialul despre folosind pozitia rezolvat, puteți citi despre acest lucru accesând pagina folosind link-ul furnizat. Vă recomand să vă familiarizați cu acest material, chiar dacă nu intenționați să implementați o astfel de bară de navigare pe resursa dvs. web, deoarece acest exemplu este foarte ilustrativ și ajută la înțelegerea esenței poziționării fixe.

    Pe lângă implementarea meniului plutitor, la creare este utilizată poziția fixă tipuri variate anteturi, file, imagini. Într-un cuvânt, să securizeze acele blocuri pe o pagină web care sunt cele mai importante din punctul de vedere al îmbunătățirii caracteristicilor comportamentale ale utilizatorilor, al creșterii conversiei unui proiect comercial etc.

    Publicația a ajuns la concluzia sa logică. În articolul următor, intenționez să ating nuanțele utilizării proprietății, ale căror valori afectează locația blocurilor poziționate pe o pagină web. De fapt, aceasta va fi o continuare a materialului de astăzi. În concluzie, țin să vă reamintesc că puteți nota eforturile autorului făcând clic pe butoanele de socializare chiar mai jos, și să vă exprimați părerea despre utilitatea informațiilor oferite în comentarii.