Poziţionarea elementelor. Poziționare absolută în CSS. Elementele poziționate absolut ignoră proprietatea float

Acestea funcționează cu toate elementele poziționate, cu excepția celor statice.

Exemplu de poziționare.

Elementele se pot suprapune între ele!

Afișarea unui element deasupra restului!

Proprietatea poziției are 4 valori: statică, fixă, relativă și absolută. Fiecare dintre aceste semnificații va fi demonstrat mai jos cu un exemplu de utilizare.

Înainte de a privi în detaliu toate tipurile de poziționare a elementelor pe o pagină, va trebui să luăm în considerare ce este fluxul de documente.

Fluxul documentelor

În mod implicit, elementele de pe o pagină web sunt afișate în ordinea în care apar în documentul HTML, adică elementele bloc ocupă toată lățimea disponibilă și sunt stivuite vertical unul sub celălalt. Elementele inline sunt aliniate orizontal până când toată lățimea disponibilă este ocupată, după ce întreaga lățime este ocupată, se face o întrerupere de linie și totul începe din nou. Această aranjare a elementelor se numește debit normal(numit si fluxul documentelor sau flux general).

Puteți utiliza proprietatea float sau position pentru a elimina un element din fluxul normal. Dacă un element „cade” din fluxul normal, atunci elementele care se află în codul de sub acel element vor fi mutate în locul său pe pagina web.

Poziționare statică

Static este poziționarea implicită pentru toate elementele dintr-o pagină web. Dacă nu se aplică elementului proprietatea poziției, apoi va fi static și va fi afișat pe pagina web în funcție de fluxul general de elemente.

La folosind CSS proprietățile sus , stânga , dreapta sau jos la un element poziționat static, acestea vor fi ignorate.

Dacă este necesar, puteți seta poziționarea statică în foaia de stil folosind valoarea statică:

Numele documentului

Primul paragraf.

Al doilea paragraf.

Încerca "

Poziționare fixă

Elementele cu poziționare fixă sunt situate pe pagina relativă la fereastra browserului. Astfel de elemente sunt eliminate din fluxul general, elementele care urmează elementul fix în flux îl vor ignora, mișcându-și și luându-și locul pe pagina web.

Merită să acordați atenție faptului că elementele cu poziționare fixă se pot suprapune cu alte elemente, ascunzându-le complet sau parțial. În timp ce derulați pagini lungi, ele creează efectul de obiecte nemișcate, rămânând în același loc:

Numele documentului

Text Text Text Text Text Text Text Text Text Text Text Text Text

Încerca "

Poziționare relativă

Elementele cu poziționare relativă, ca și elementele statice, rămân în fluxul general. Când aplicați proprietățile de sus, stânga, dreapta sau de jos elementelor relativ poziționate, acestea se vor muta în raport cu locația lor, lăsând spațiu gol unde a fost localizat inițial elementul.

Astfel de elemente nu afectează poziția elementelor care le înconjoară, elementele rămase rămân pe loc și pot fi suprapuse de un element relativ poziționat:

Numele documentului

Titlu de primul nivel.

Titlu relativ pozitionat.

Titlu de nivel al treilea.

Încerca "

Notă: Elementele relative sunt de obicei folosite ca părinte pentru elementele absolute.

Poziționare absolută

Elementele poziționate absolut sunt îndepărtate complet din fluxul general, elementele rămase vor ocupa spațiul liber, ignorând complet elementele poziționate absolut. Apoi, puteți poziționa elementul oriunde doriți pe pagina web folosind proprietățile de sus , stânga , dreapta sau de jos.

Toate elementele poziționate absolut sunt poziționate relativ la fereastra browserului sau relativ la cel mai apropiat strămoș poziționat (dacă există unul) care are o proprietate de poziție absolută , fixă sau relativă .

Numele documentului

Să schimbăm locația logo-ului folosind poziționarea absolută.
Acum logo-ul va fi situat în partea dreaptă colțul de sus pagini.

Încerca "

Elemente suprapuse

Când elementele sunt în afara fluxului general al paginii, ele se pot suprapune. În mod obișnuit, ordinea elementelor corespunde ordinii lor în codul HTML al paginii, totuși, este posibil să se controleze ordinea de suprapunere folosind proprietatea CSS z-index , cu cât valoarea acesteia este mai mare, cu atât elementul va fi mai mare.

Numele documentului

indicele z: 1;

indicele z: 0;

indicele z: 2;

15.03.2017

Nu încă

Salutare tuturor!
În tutorialul de astăzi vă voi arăta cum puteți utiliza poziționarea blocului pentru a plasa un element oriunde pe ecran.
Ce ne oferă poziționarea blocului? Cu ajutorul poziționării blocurilor, un webmaster va putea crea orice design unic de site, plasând blocuri acolo unde dorește. Pentru a plasa blocuri oriunde pe ecran, trebuie doar să specificați coordonatele.

Coordonate în CSS

proprietate "TOP» | « STÂNGA» | « DREAPTA» | « FUND »
Trebuie specificate coordonatele pentru poziționarea blocurilor, adică unde va fi plasat blocul.

Diagrama sistemului de coordonate:

Coordonatele sunt specificate de patru reguli:

top- sus;
stânga- stânga;
dreapta- dreapta;
fund- jos.

Sintaxă:

Rule_Coordinate: valoare_coordonată;

Sens:
Specificați valoarea în px sau %.

Sus: 100px; /* marginea de sus */ stânga:100px; /* marginea stângă */

Este suficient doar să specificați coordonatele pentru două margini (sus sau jos, stânga sau dreapta).

Poziționarea în CSS

proprietate "POZIŢIE »
Poziționarea se scrie în CSS prin regula „poziție” cu valoarea dorită.

Sintaxă:

Poziție: valoare;

Sens:

absolut- absolut;
relativ– rudă;
fix– fix.

Să trecem prin fiecare valoare.

Sens " ABSOLUT"
Poziționare absolută permite webmasterului să plaseze blocuri pe o pagină web oriunde pe ecran. Este suficient să scrieți regula „poziției” în CSS cu valoarea „absolută” și coordonatele necesare:

Poziție: absolută; /* pozitionare absoluta*/

Blocați în css

Rezultat:

Sens "RELATIV »
Poziționare relativă permite webmasterului să mute un bloc pe o pagină web, dar spațiul original al blocului nu este eliberat pentru un alt element. În CSS, scrieți regula „poziției” cu valoarea „relativă” și coordonatele dorite:

Poziție:rudă; /* poziționare relativă*/

Blocați în css

CSS înseamnă Cascading Style Sheets. CSS descrie modul în care elementele HTML vor fi afișate pe ecran, hârtie sau pe alte suporturi. CSS economisește multă muncă. Poate controla aspectul mai multor pagini web simultan. CSS poate fi adăugat la elementele HTML în 3 moduri: Inline - prin utilizarea atributului de stil în elementele HTML Intern - prin utilizarea unui element din secțiunea Extern - prin utilizarea unui fișier CSS extern Cel mai comun mod de a adăuga CSS, este păstrarea stiluri în fișiere CSS separate. Totuși, aici vom folosi stilul inline și intern, deoarece acest lucru este mai ușor de demonstrat și mai ușor pentru tine să îl încerci singur.

Rezultat:

Mod implicit

Poziționare relativă

Poziționare fixă în CSS

"Valoare fixa
Poziționare fixă permite webmasterului să plaseze blocuri pe o pagină web oriunde pe ecran, iar la derularea paginii web, blocul va fi întotdeauna situat relativ la fereastra browserului (va fi întotdeauna vizibil pe ecran). Este suficient să scrieți regula „poziției” în CSS cu valoarea „fixă” și coordonatele necesare:

Poziție:fixă; /* pozitionare fixa */

Blocați în css

Dacă rezultatul nu este vizibil sau clar, adăugați suficient text pentru a crea o bară de defilare pe ecranul paginii web.

Asta e pentru lecție! Au mai rămas 2-3 lecții și vei termina de masterat Bazele CSS. Aceasta înseamnă că puteți crea site-uri web frumoase cu ușurință.
Nu ratați restul lecțiilor! Abonați-vă la actualizări!

Postarea anterioară
Următoarea intrare

Când lucrează cu text, utilizatorul poate avea nevoie să schimbe propoziții sau paragrafe întregi sau să aranjeze fragmente într-un mod nestandard. Mutați un bloc de text într-o aplicație Microsoft Office Cuvântul poate fi făcut în mai multe moduri.

Instrucțiuni

Selectați blocul de text pe care doriți să îl mutați. Acest lucru se poate face folosind butonul stâng al mouse-ului sau o comandă rapidă de la tastatură. Combinaţie Tastele Shift iar săgețile dreapta/stânga de pe tastatură vă permit să selectați un caracter imprimat, săgețile sus/jos - o linie.

Ctrl, Shift și săgeata dreapta/stânga evidențiază un cuvânt, iar dacă utilizați săgețile sus sau jos, puteți selecta un întreg paragraf.

După ce fragmentul dorit este selectat, mutați cursorul pe acesta și faceți clic butonul din stanga soareci. În timp ce îl țineți apăsat, trageți un bloc de text în locul dorit din document. Eliberați butonul mouse-ului.

O altă opțiune: selectați blocul și faceți clic dreapta pe selecție. În meniul derulant, selectați comanda „Tăiați” - fragmentul de text va fi plasat în clipboard. Plasați cursorul acolo unde doriți să mutați blocul și faceți clic dreapta din nou. ÎN meniul contextual selectați comanda „Inserare”.

Comenzile pot fi apelate și de la tastatură. Combinațiile de taste Ctrl și X vă permit să tăiați fragmentul de text dorit și Tastele Ctrlși V – lipiți-l în altă parte în document. De asemenea, puteți utiliza butoanele din bara de instrumente din fila „Acasă”.

Dacă ați plasat text folosind instrumentul Subtitrări, va trebui să faceți lucrurile diferit. ÎN în acest caz, textul este plasat într-o zonă specificată care are margini. Pentru a muta un astfel de bloc, selectați nu textul în sine, ci cadrul din jurul lui, apoi trageți acest cadru în locația de care aveți nevoie în timp ce țineți apăsat butonul stâng al mouse-ului. Textul din interiorul limitelor este o parte integrantă a obiectului Caption și se va muta odată cu cadrul.

Când lucrați cu textul aflat în celulele tabelului, Orice va face din variantele descrise. Totul depinde de condiții specifice: uneori este necesar să mutați doar partea de text, alteori este necesar să mutați o celulă sau mai multe celule adiacente.

Un element bloc în HTML este un element care, implicit, ocupă întreaga lățime a elementului părinte. Elementul părinte poate fi un alt element de bloc sau o fereastră de browser. Puteți seta lățimea și înălțimea unui element de bloc folosind proprietățile CSS. Poziționare elemente de bloc numit procesul de a le plasa în interiorul ferestrei browserului și unul față de celălalt cu folosind CSS poziţia proprietăţilor , stânga , sus , dreapta şi jos . Proprietate Poziția CSS are scopul de a seta unul dintre cele patru tipuri de poziționare disponibile: statică (implicit), absolută, fixă și relativă. Odihnă Proprietăți CSS, și anume stânga , sus , dreapta și jos sunt destinate să specifice distanțele relativ la marginile din stânga, sus, dreapta și inferioară ale elementului părinte. De asemenea, elementele de bloc se pot suprapune unele pe altele atunci când setați anumite proprietăți și această ocazie același lucru poate fi folosit pe site-uri web.

Poziționare implicită (statică)

Dacă nu ați specificat o poziție pentru un element bloc sau static specificat, care este același lucru, atunci elementele bloc sunt aranjate în ordine. Mai mult, următorul bloc (de exemplu: roșu) este situat cu linie nouă. De asemenea, această poziționare nu este afectată de setarea distanțelor stânga, sus, dreapta și jos.

Poziționare absolută (absolută)

Cu poziționarea absolută, poziția unui element este specificată în raport cu marginile ferestrei browser utilizând distanțele specificate de proprietățile stânga, sus, dreapta și jos. Dacă specificați distanțele stânga și dreapta în același timp și acestea sunt în conflict între ele, atunci se acordă preferință stânga , același lucru este valabil și pentru sus și jos , în care distanța de sus are prioritate. Poziționarea absolută este folosită foarte des împreună cu poziționarea relativă în scopuri de proiectare, atunci când este necesar să se plaseze diferite elemente unul față de celălalt, poate fi folosită și pentru a crea meniuri derulante, aspectul site-ului etc.

Poziționare fixă

Poziționarea fixă este diferită de alte tipuri de poziționare și nu se mișcă odată cu conținutul pe măsură ce derulați pagina. Elementele de bloc cu poziție fixă sunt ancorate folosind proprietățile din stânga, sus, dreapta și jos la marginile ferestrei browserului. Poziționarea fixă este utilizată pentru a crea interfețe cadru (fereastra browserului este împărțită în mai multe zone), meniuri fixe, subsol fix site și blocuri „permanente” (lista de link-uri, butoane sociale etc.).

Poziționare relativă

Poziționarea relativă este specificată prin specificarea distanțelor stânga, sus, dreapta și jos în raport cu poziția sa curentă.

Cu toate acestea, această poziție de bloc poate fi creată și folosind proprietățile marginii(liniuțe).

Poziționarea relativă nu este distractiv de folosit singură, este folosită în mare parte împreună cu poziționarea absolută.

Să luăm în considerare opțiunile:

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 succesiv 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 o poziționare absolută elemente copil in interiorul blocului.
absolut	Un element poziționat absolut este eliminat complet din fluxul de documente și poziționat în raport cu limitele blocului său container (un 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 înlocuit de alte elemente (datorită proprietățile 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. Acest lucru permite poziționarea elementelor într-un element container.

.wrap ( umplutură: 10px; înălțime: 150px; poziție: relativ; fundal: #e7e6d4; text-align: dreapta; chenar: 3px întreruptă #645a4e; ) .alb (poziția: absolut; lățime: 200px; sus: 10px; stânga : 10px: fundal: #ffffff: 3px #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. Un element cu poziție: absolută sau poziție: fixă nu poate fi setat în același timp proprietate de plutire, dar pentru un element cu poziție: relativ - este posibil.
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 începând 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 - grup de subsol . Valoarea tabelului inline se schimbă î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 se va deplasa în jos.

Î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.

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: 3px punctat #666666 ) li:last-child (marja-dreapta: 0;) Fig. 6. Curățarea fluxului de listă orizontal