Poziționarea unui număr mare de blocuri în html. Afișarea unui element deasupra restului! Poziționarea relativă în CSS
Imaginați-vă că un dezvoltator web nu trebuie să se gândească deloc la cum va arăta vizual pagina terminata. Pur și simplu scrie codul, elementele în sine se aliniază pe pagină, de sus în jos (bloc) și de la stânga la dreapta (inline). Cu cât codul este scris mai sus în document, cu atât va apărea mai sus pe pagină.
În general, vom vedea comportamentul natural al elementelor și ordinea în care sunt afișate pe pagină - fluxul documentului. Dar nu suntem deloc mulțumiți de această comandă, vrem să plasăm logo-ul în stânga colțul de sus, iar butonul este ușor la dreapta. Avem nevoie control total peste toate elementele, decidem unde și ce va fi amplasat. Și pentru aceasta aveți nevoie de un instrument (proprietate) care schimbă comportamentul normal al elementelor din flux. Ce fel de proprietate este aceasta?
ÎN CSS stiluri aceasta se numește poziționare (poziţie), care poate fi obișnuit (static), rudă (relativ)și absolută (absolut).
Poziționarea relativă în CSS
La poziționare relativă, blocul se mișcă în raport cu el pozitia de pornire. Cu toate acestea, după ce a scris blocului:
Poziția: relativă;
nu se va întâmpla nimic, va rămâne pe loc. Și sistemul de coordonate mută blocul (sus, jos, stânga, dreapta), cu valori atât pozitive, cât și negative.
Cum functioneaza?
În interiorul unui bloc galben cu o clasă bloc-galben există un bloc roșu cu o clasă bloc-relativ. Într-un flux normal, blocul roșu se suprapune pe cel galben, deoarece este scris ultimul în cod.
Trebuie să mutăm blocul roșu în jos cu 10 pixeli. Acest lucru se poate face doar prin schimbarea forțată a poziției blocului roșu. Așa scriem noi sus: 10px, dar trebuie să indicați de unde vor fi numărați acești 10 pixeli?
Înregistrându-se poziție: relativă, clarificăm că numărul este relativ la poziția sa actuală.
Bloc-galben (
culoare de fundal: #ffe70f;
}
relativ la bloc (
poziție: relativă;
sus: 10px;
culoare de fundal: #ed5b77;
}
În imagine vedem cum blocul roșu s-a deplasat în jos, cu 10 pixeli în jos față de poziția inițială.
Dacă îl eliminați din cod poziție: relativă, atunci blocul va rămâne pe loc. Dacă în schimb relativ, scrie absolut, apoi implicit acești 10 pixeli vor fi numărați de la marginea ferestrei browserului și, ca urmare, blocul nostru, dimpotrivă, se va ridica, ajungând la marginea de jos a browserului. Și asta nu făcea parte din planurile noastre.
Poziționare absolută în CSS
Există un bloc în imagine pozitionat absolut, acesta este momentul în care sistemul de coordonate este numărat de la marginea browserului, prin înlocuirea unui singur cuvânt, am schimbat poziția blocului.
Poziție: absolută;
Există o particularitate. Poziționare absolută afectează și elementele inline. Dacă elementul inline este dat poziție: absolută, atunci se va comporta ca un bloc. Aceasta este analogă cu proprietatea - afisare: bloc.
Asta nu este tot, elementul „absolut” situat în interiorul părintelui „relativ” își schimbă punctul de referință de coordonate și începe să fie poziționat departe de părinte.
poziție: relativă
poziție: absolută;
Bloc cu clasa bloc-absolut fi în interiorul părintelui bloc-galben.
Bloc-galben (
poziție: relativă;
umplutură: 10px;
culoare de fundal: #ffe70f;
}
Din moment ce blocul galben are poziționare relativă, apoi blocul roșu cu poziționare absolută , se deplasează în raport cu roșu cu pixelii specificați.
Bloc absolut (
poziție: absolută;
jos: 10px;
stânga: 10px;
culoare de fundal: #ed5b77;
}
Poziționare fixă
Când derulați o pagină, un bloc cu poziție: fixă, va rămâne pe loc, această metodă este de obicei folosită pentru a repara bara de navigare.
indicele z
Rezolvă ordinea suprapunerii blocurilor „absolute”. Avem nevoie ca blocul roșu să fie deasupra celui galben, apoi indicăm z-index: 2 pentru roșu și z-index: 1 pentru galben.
Bloc-rosu (
poziție: relativă;
indicele z: 2;
culoare de fundal: #ffe70f;
}
Bloc-galben (
poziție: absolută;
sus: 20px;
indicele z: 1;
culoare de fundal: #ed5b77;
}
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
Ctrl, Shift și săgeata dreapta/stânga evidențiază un cuvânt, iar dacă folosești săgețile sus sau jos, poți evidenția un întreg paragraf.
Ultima actualizare: 28.04.2016
CSS oferă capabilități de poziționare a elementelor, ceea ce înseamnă că putem plasa un element într-o anumită locație de pe pagină.
Principalele proprietăți care controlează poziționarea în CSS sunt proprietatea poziției. Această proprietate poate lua una dintre următoarele valori:
static: poziționarea elementului standard, valoarea implicită
absolut : elementul este poziționat relativ la limitele elementului container dacă proprietatea sa de poziție nu este statică
relativ : elementul este poziționat relativ la poziția sa implicită. De obicei, scopul principal al poziționării relative nu este de a muta un element, ci de a poziționa punct nou legături pentru poziţionarea absolută a elementelor imbricate
fix : elementul este poziționat în raport cu fereastra browserului, acest lucru vă permite să creați elemente fixe care nu își schimbă poziția atunci când sunt derulate
Nu ar trebui să aplicați simultan proprietatea float și orice alt tip de poziționare decât static (adică tipul implicit) unui element.
Poziționare absolută
Zona de vizualizare a browserului are o margine de sus, de jos, din dreapta și din stânga. Fiecare dintre aceste patru margini are o proprietate CSS corespunzătoare: stânga, dreapta, sus și jos. Valorile acestor proprietăți sunt specificate în pixeli, ems sau procente. Nu este necesar să setați valori pentru toate cele patru părți. De regulă, sunt setate doar două valori - indentarea din partea de sus a marginii superioare și indentarea de la marginea din stânga.
SALUT LUME
Aici div-ul poziționat absolut va fi de 100 de pixeli la stânga marginii ferestrei și la 50 de pixeli de jos.
Nu este atât de important ca după asta element div vin alte elemente. The bloc divîn orice caz, acesta va fi poziționat în raport cu limitele ferestrei de vizualizare a browserului.
Dacă un element cu poziționare absolută este situat într-un alt container, care, la rândul său, are o valoare a proprietății de poziție care nu este egală cu static , atunci elementul este poziționat relativ la limitele containerului:
Poziționare relativă
Poziționare relativă specificat de asemenea folosind valoarea relativă. Pentru a specifica poziția specifică în care este deplasat elementul, se folosesc aceleași proprietăți de sus, stânga, dreapta, jos:
proprietatea z-index
În mod implicit, dacă două elemente de chenar se potrivesc, elementul definit în marcaj html ultimul. Cu toate acestea, proprietatea z-index vă permite să schimbați ordinea elementelor atunci când sunt suprapuse. Proprietatea ia un număr ca valoare. Elemente cu de mare valoare Această proprietate va apărea deasupra elementelor cu o valoare mai mică a indicelui z.
De exemplu:
Acum să adăugăm o nouă regulă stilului de bloc redBlock:
RedBlock( z-index: 100; poziție: absolut; sus: 20px; stânga: 50px; lățime: 80px; înălțime: 80px; culoarea fundalului: roșu; )
Aici indexul z este 100. Dar nu trebuie să fie numărul 100. Deoarece al doilea bloc nu are index z definit și de fapt egal cu zero, apoi pentru redBlock putem seta y proprietățile z-index orice valoare mai mare decat zero.
Și acum primul bloc se va suprapune pe al doilea, și nu invers, așa cum a fost cazul la început.
Acestea funcționează cu toate elementele poziționate, cu excepția celor statice.
Exemplu de pozitionare.
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 examina î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ă. elemente de bloc ocupă toată lățimea disponibilă și sunt stivuite vertical unul sub celălalt. Elemente în linie sunt aliniate orizontal până când toată lățimea disponibilă este ocupată, după ce toată lățimea 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 sunt situate î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 aplicați proprietatea poziției unui element, acesta va fi static și va apărea 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ă:
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ă elementului fix în flux îl vor ignora, mișcându-se ș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:
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 poziționate relativ, 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 din jurul lor; elementele rămase rămân pe loc și pot fi suprapuse de un element relativ poziționat:
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 plasate 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ă .
Să schimbăm locația logo-ului folosind poziționarea absolută.
Logo-ul va fi acum situat în colțul din dreapta sus al paginii.
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.
