Blocați locația din dreapta css. Poziționare absolută în CSS: înțelegeți o dată pentru totdeauna

Sunteți încă confuz cu privire la modul în care funcționează poziționarea absolută în CSS și pierd elemente de pe ecran? Să înțelegem această magie.

Introducere în poziționare Când setați position: absolute , nu elementul în sine iese în prim-plan, ci containerul său părinte, deoarece poziționarea în CSS este relativă la acesta. Dificultatea este că acesta nu este întotdeauna părintele imediat al elementului.

Să ne uităm la un cod cu patru div-uri imbricate unul în celălalt ca o păpușă.

< body >

< div class = "box-1" >

< div class = "box-2" >

< div class = "box-3" >

< div class = "box-4" > < / div >

< / div >

< / body >

Casetele box-1 , box-2 și box-3 sunt centrate pentru frumusețe folosind marja: proprietăți CSS auto și flex. Blocul caseta-4 rămâne în poziția sa implicită în fluxul de documente.

body ( display: flex; ) .box-1, .box-2, .box-3 ( display: flex; margin: auto; )

corp(

display: flex;

Caseta-1,

Caseta-2,

Caseta-3 (

display: flex;

Marja: auto;

Toate cele 4 elemente au poziționare implicită. Momentan aspectul arată astfel:

.box-4 fără poziționare Relativ la ce poziționăm?

Pentru a se poziționa, un element trebuie să cunoască două lucruri:

care părinte va deveni punctul de plecare;
cantitatea de deplasare relativă la punctul de referință (sus, jos, dreapta sau stânga).

Dacă definiți poziție: absolută pentru caseta-4 , acel element va părăsi fluxul normal al documentului. Dar acum rămâne la locul său, deoarece coordonatele offset nu sunt specificate. Dacă lățimea unui element nu este definită în CSS, aceasta va fi egală cu lățimea conținutului său (plus padding și chenar).

.box-4 cu pozitionare absoluta fara offset

Acum să adăugăm proprietățile de sus: 0 și stânga: 0 . Elementul trebuie să determine care container părinte va deveni punctul de referință pentru aceste coordonate. Cel mai apropiat element cu o poziție nestatică (cel mai adesea poziție: relativă) devine acesta. box-4 începe să-și interogheze strămoșii unul câte unul. Nici box-3, nici box-2, nici box-1 nu sunt potrivite, deoarece au o poziționare implicită în CSS (unset).

Dacă un strămoș poziționat nu este găsit, elementul este plasat în raport cu corpul documentului:

.box-4 cu pozitionare absoluta. Elemente părinte fără poziționare

Dacă setați poziția: față de elementul caseta-1, acesta devine punctul de referință:

.box-4 cu pozitionare absoluta. .box-1 cu poziţionare relativă

Un element poziționat absolut este poziționat în raport cu strămoșul său poziționat cel mai apropiat.

Odată ce un punct de referință a fost găsit, tot ce este deasupra lui în arborele DOM încetează să mai conteze.

Dacă setați poziție: relativă și pentru caseta-2 , atunci caseta-4 va fi poziționată relativ la aceasta, deoarece acest strămoș este mai aproape.

.box-4 cu pozitionare absoluta. .box-2 cu poziţionare relativă

La fel și pentru containerul box-3:

În HTML, toate elementele pot fi împărțite în bloc și inline. Elementele bloc sunt de obicei reprezentate ca zone dreptunghiulare cu o anumită cantitate de informații. Cu ajutorul lor, se construiește grila de pagini. Astfel de elemente ocupă tot spațiul disponibil în lățime și, de obicei, există o întrerupere de linie înainte și după ele. Blocurilor pot fi date indentări, dimensiuni orizontale și verticale.

Caracteristicile elementelor bloc

Etichetele bloc includ etichete care evidențiază o cantitate mare de informații text: , ,

, , ,

Având în vedere o lățime de conținut, lățimea totală a blocului este suma valorilor de umplutură din dreapta și din stânga, marjă, chenar și lățime. La o înălțime dată - de la umplutura de sus și de jos, margini, margini și înălțime. Textul din elementele bloc este aliniat la stânga în mod implicit. Dacă unul dintre ele conține elemente inline împreună cu elemente bloc, atunci se creează un bloc anonim în jurul elementelor inline. I se va aplica stilul implicit. De asemenea, va moșteni stilul specificat atribuit părintelui său.

Fluxul se referă la ordinea în care sunt afișate elementele paginii, determinată de proprietățile specificate în CSS. În acest caz, în mod implicit, blocurile sunt aliniate de sus în jos, iar dacă nu există suficient spațiu, etichetele inline sunt mutate pe o nouă linie și aranjate de sus în jos și de la stânga la dreapta. Locația unui element pe pagină depinde de locul său în cod: cu cât este mai sus, cu atât este localizat mai devreme. Fiecare dintre elementele blocului arată ca un dreptunghi care își împinge vecinii. Puteți modifica acest comportament folosind proprietăți speciale. Alinierea anumitor blocuri la centrul sau laturile unui container în CSS se numește poziționare.

Amplasarea blocurilor poate fi controlată utilizând poziționarea absolută și relativă. Poziționarea este folosită pentru a oferi secțiunilor mari ale unei pagini o locație specifică, pentru a crea interfețe complexe, ferestre pop-up și elemente decorative. Proprietatea principală folosită pentru poziționarea blocurilor în CSS este poziția. Are patru proprietăți principale:

relativ;
absolut;
fix;
static.

Cu ajutorul lor, puteți schimba modurile de aspect specificând unul dintre cei patru parametri: sus, dreapta, jos sau stânga. Există, de asemenea, o proprietate pentru ordonarea straturilor - z-index. Poziționarea cu proprietatea statică nu este utilizată în mod obișnuit, deoarece denotă poziționarea implicită a blocurilor. Prin urmare, utilizarea oricăror parametri nu îl afectează în niciun fel. Celelalte trei proprietăți sunt folosite pentru aspect: relativă, absolută, fixă.

Poziționarea relativă a blocurilor în CSS, adică poziția: proprietatea relativă, înseamnă că un element poate fi mutat și poziția inițială schimbată. Un astfel de bloc rămâne încă în flux. De fapt, nu el însuși este deplasat, ci copia lui. Valorile proprietăților sunt setate pentru a indica exact cât de mult se va mișca blocul într-o direcție sau alta. Ele sunt cel mai adesea măsurate în pixeli. Dar este acceptabil să folosiți alte unități.

Proprietatea de sus mută o copie a unui anumit bloc în sus sau în jos cu numărul de pixeli specificat în proprietate. Atunci când îl utilizați, elementele situate dedesubt sau deasupra rămân la locul lor, deoarece, de fapt, blocul care este deplasat nu se mișcă nicăieri.

Proprietatea de jos mută blocul în direcția opusă proprietății de sus. O valoare pozitivă ajută la mutarea acesteia în sus, iar o valoare negativă ajută la mutarea acesteia în jos. Proprietățile dreapta și stânga mută elementul la dreapta și, respectiv, la stânga. Combinându-le pe toate, puteți seta locația exactă a blocului pe pagină, deplasându-l de-a lungul axelor de coordonate verticale și orizontale. Dacă măriți indentațiile, acestea vor fi calculate nu de la marginea blocului în sine, ci de la deplasarea copiei în lateral.

Poziționarea absolută a blocurilor în CSS este specificată de valoarea proprietății de poziție absolută. Un element care este poziționat cade absolut din fluxul de documente, iar locul lui este luat de blocurile învecinate. Lățimea unui astfel de element este întinsă în funcție de conținutul său și poate fi deplasată prin setarea anumitor valori pentru proprietățile sus, stânga, dreapta, jos. Poziționarea absolută a blocurilor în CSS este utilă pentru titluri. Dar poziție: absolute funcționează nu numai pentru elementele bloc, ci și pentru elementele inline.

Un element pozitionat absolut inline se va comporta exact la fel ca un element inline. Prin urmare, poziționarea poate fi folosită și pentru a controla textul în CSS. Puteți aplica câteva proprietăți noi, de exemplu, modificați înălțimea și lățimea. Centrarea și alinierea verticală în CSS utilizează o combinație de mai multe proprietăți. Controlează alinierea verticală a proprietății de sus. Dacă doriți să centrați un bloc în CSS, containerul principal ar trebui să fie poziționat relativ, iar elementul aliniat să fie poziționat absolut. Containerul trebuie să seteze proprietatea de sus: 50% și pentru a muta elementul la jumătate din înălțimea sa, utilizați proprietatea translate cu valoarea „0, -50%”. Elementele poziționate absolut pot fi separate într-un tip nou, deoarece li se aplică proprietăți care nu sunt disponibile pentru alte tipuri de poziționare.

Proprietățile stânga, sus, dreapta și jos funcționează diferit pe elementele poziționate absolut și relativ. Pentru elementele relative, aceste proprietăți stabilesc decalajul relativ la locul în care se află elementul. Cele poziționate absolut ocupă un loc în raport cu un anumit sistem de coordonate legat de dimensiunea ferestrei browserului. Punctele de plecare ale acestui sistem sunt colțurile ferestrei. Când utilizați proprietatea stângă, indentarea va fi numărată din partea stângă a browserului, dar nu va exista nicio bară de defilare. Proprietatea de sus, când este poziționată în mod absolut, specifică decalajul de la partea de sus a browserului la partea de sus a elementului la care este aplicată. Prin combinarea ambelor proprietăți, elementul poate fi mutat în raport cu colțul din stânga sus al browserului.

În mod similar, folosind proprietățile din dreapta și de sus, puteți apăsa un element din partea dreaptă a ferestrei browserului și puteți modifica poziția verticală, deplasându-l în colțul din dreapta sus. Dacă proprietatea dreaptă este setată la o valoare negativă, blocul se va muta în afara graniței ferestrei. După aceasta, ar trebui să apară o bară de defilare. Pentru a muta un element în jos, utilizați proprietatea de jos. Specifică indentarea de la marginea de jos a ferestrei browserului până la partea de jos a blocului. Dacă valoarea sa este negativă, apare și o bară de defilare, deoarece elementul este mutat dincolo de marginea de jos a ferestrei browserului.

În mod implicit, toate elementele cărora li se oferă o poziționare absolută sunt legate de un sistem de coordonate - fereastra browserului. Dar poate fi schimbat dând o poziționare relativă a elementului părinte. Apoi blocul copil își va schimba locația în funcție de părinte. Dacă printre elementele părinte există mai multe cu poziționare relativă, atunci numărarea se efectuează din cel mai apropiat dintre ele. În acest caz, poziționarea implicită va fi cea specificată în eticheta body.

Înainte ca unui element să i se dea o poziționare absolută, acesta a fost numit într-un loc origine implicită. Dacă unui astfel de bloc nu i se dau proprietăți, nu se va muta. Îl puteți deplasa setând proprietatea marjei. Acesta va funcționa similar cu proprietățile de poziționare. Dacă nu definiți valoarea proprietății din stânga și toate celelalte, atunci aceasta va fi egală cu auto. De asemenea, puteți utiliza automat pentru a readuce elementele în locurile lor originale.

O altă valoare este fixă. Proprietatea poziție ancorează un element într-o anumită locație. Poziționarea fixă este adesea folosită pentru a crea meniuri în CSS. Este similar cu absolutul, dar blocul fix cade din flux. Chiar și atunci când derulați pagina, un astfel de element va rămâne pe loc, așa că este convenabil să îl utilizați pentru a crea un meniu în CSS. Punctul de pornire va fi legat de fereastra browserului. Dacă există mai multe blocuri poziționate, proprietatea z-index este folosită pentru a le ordona. Cu ajutorul lui, puteți suprapune blocuri relative cu cele absolute dacă le oferiți indicele corespunzător, exprimat ca număr întreg. Cu cât este mai mare, cu atât blocul va fi mai mare.

După cum probabil știți deja, puteți configura un site web folosind tabele, caz în care pagina este împărțită în celule. De asemenea, puteți utiliza blocuri în aceste scopuri atunci când o pagină de site web constă din elemente individuale.

Probabil că nu mă voi înșela dacă spun că o problemă serioasă pentru mulți webmasteri începători este sarcina de a plasa blocuri într-un anumit loc pe o pagină web.

Una dintre principalele dificultăți la aranjarea folosind blocuri este poziționarea (alinierea) acestor blocuri.

Cred că mulți dintre voi ați auzit despre un strat. Și, de regulă, un strat este înțeles ca un bloc specificat de etichetă. De fapt, totul este puțin diferit.

Nu există straturi în HTML. Este doar o metaforă. Când vorbim despre straturi, ele înseamnă un anumit container (element) html care poate fi plasat într-un anumit loc pe o pagină web.

A doua concepție greșită este de a clasifica doar blocul specificat de etichetă ca straturi. Nici acest lucru nu este adevărat. Acestea pot include, de asemenea, paragrafe (

), liste (

După cum am menționat mai sus, puteți seta locația oricărui element HTML. Nu este nevoie să folosiți întotdeauna eticheta pentru aceasta. De asemenea, utilizarea acestei etichete nu vă obligă să îi acordați vreo poziție pe pagina web.

Semnificația utilizării unui bloc specificat de o etichetă se reduce la mărire. La urma urmei, puteți plasa și alte elemente în interiorul acestuia (paragrafe, imagini etc.). Acest lucru creează un bloc mare cu conținut variat, care este mult mai ușor de poziționat pe o pagină web decât fiecare element separat.

Există patru tipuri principale de poziționare:

1. Static
2. Absolut
3. Fix
4. Relativ

Folosit ca locație implicită. În acest caz, browserul se uită la codul HTML, îl împarte în elemente și compune o pagină din acestea. Rezultatul este o succesiune de un număr de elemente. Sunt afișate în ordinea în care sunt indicate în codul html.

Aplicarea parametrilor stânga, sus, dreapta și jos nu produce niciun rezultat.

Poziționarea statică trebuie avută în vedere atunci când este utilizată poziționarea relativă.

Folosind poziționarea absolută, sunt specificate coordonatele colțului din stânga sus al blocului. În acest caz, coordonatele sunt numărate relativ la locația elementului părinte. Dacă elementul părinte este o fereastră de browser, atunci blocul este aliniat în raport cu acesta. Dacă există un alt element în care se află blocul, atunci alinierea are loc în raport cu acest element.

Deja din nume devine clar că în acest caz elementul este fix. Se află într-un anumit loc de pe pagina web și nu se mișcă nicăieri. Această aliniere este adesea folosită pentru ferestre pop-up, unde sunt centrate și nu se mișcă în timp ce derulați pagina.

Acest tip de poziționare poate fi dificil. Numele său nu este pe deplin potrivit. Mulți oameni confundă poziționarea relativă și absolută a elementelor. Poate părea că alinierea este relativă la elementul părinte. Și în cazul poziționării absolute - relativ la fereastra browserului. Dar asta nu este adevărat.

Este necesar să înțelegem că locația elementului în acest caz are loc relativ la locul său într-o poziție statică. Acesta este ceea ce s-a menționat mai sus.

Mai simplu spus, îi spui browserului să mute un element atât de mulți pixeli față de locul în care se află în mod implicit.

Mai este un punct dificil. Ce se întâmplă dacă elementul părinte are o poziție relativă, dar elementul imbricat are o poziție absolută? În acest caz, coordonatele elementului copil vor fi numărate relativ la elementul părinte, ținând cont de decalajul acestuia, dacă este cazul.

Deci, există o proprietate de poziție. Această proprietate poate lua 4 valori Static, Absolut, Fix și Relativ. Valoarea implicită este Statică.

Când specificați coordonatele pentru un element, trebuie să spuneți și browserului cum ar trebui să calculeze acele coordonate. Trebuie să-i dăm un punct de plecare.

Nu uitați că dacă proprietatea poziției este absentă, coordonatele nu vor fi luate în considerare, blocul va rămâne în același loc, în poziția sa statică.

În aceste scopuri, sunt utilizate patru tipuri de proprietăți:

1. Sus
2.Stânga
3.Corect
4. De jos

Top - o valoare pozitivă (de exemplu, 20px) mută blocul cu 20 pixeli în jos. O valoare negativă (-20px) mută elementul cu 20 de pixeli în sus. Toate acestea se întâmplă relativ la colțul din stânga sus.

Stânga - deplasați la stânga sau la dreapta, în funcție de semn. Relativ la colțul din stânga sus.

Dreapta - deplasați la dreapta și la stânga, în funcție de semn. Relativ la colțul din dreapta sus.

De jos - comutați în sus sau în jos, în funcție de semn. Apare relativ la colțul din stânga jos.

Iată codul HTML:

Și acesta este CSS-ul:

#1 {
poziție:relativă;
sus:100px;
stânga: 100px;
lățime: 500px;
înălțime: 500px;
culoare de fundal:#CCCCCC;
}

#11 {
culoare de fundal:#003399;
poziție: absolut;
jos: -30px;
dreapta: -50px;
lățime: 100px;
înălțime: 100px;
}

#2 {
culoare de fundal:#990066;
lățime: 200px;
înălțime: 300px
}

Practică.

În timp ce scriam, mi-am dat seama.

Vlad Merjevici

Poziționarea este poziția unui element într-un sistem de coordonate. Există patru tipuri de poziționare: normală, absolută, fixă și relativă. În funcție de tip, care este setat prin proprietatea poziție, sistemul de coordonate se modifică și el.

Datorită combinației dintre proprietățile poziției, stânga, sus, dreapta și jos, un element poate fi suprapus unul peste altul, afișat într-un punct cu anumite coordonate, fixat într-o locație specificată, determina poziția unui element față de altul, etc. Ca și alte proprietăți CSS, controlul poziționării este disponibil prin scripturi. Astfel, poți schimba dinamic poziția elementelor fără a reîncărca pagina, creând animație și diverse efecte.

Dacă proprietatea de poziție a unui element nu este setată sau valoarea sa este static , elementul este redat în fluxul de document ca de obicei. Cu alte cuvinte, elementele apar pe pagină în ordinea în care apar în codul sursă HTML.

Proprietățile stânga, sus, dreapta, jos, dacă sunt definite, sunt ignorate.

Cu poziționarea absolută, elementul nu există în fluxul de documente și poziția sa este setată relativ la marginile browserului. Puteți seta acest tip prin valoarea absolută a proprietății de poziție. Coordonatele sunt specificate relativ la marginile ferestrei browser, numită „zona vizibilă” (Fig. 3.42).

Orez. 3.42. Valorile proprietăților stânga, dreapta, sus și jos pentru poziționarea absolută

Modul este caracterizat de următoarele caracteristici.

Lățimea stratului, cu excepția cazului în care este specificat în mod explicit, este egală cu lățimea conținutului plus valorile de margine, chenar și umplutură.
Un strat nu își schimbă poziția inițială decât dacă are proprietățile dreapta, stânga, sus și jos.
Proprietățile din stânga și de sus au prioritate față de proprietățile din dreapta și de jos. Dacă stânga și dreapta se contrazic reciproc, atunci valoarea dreptei este ignorată. Același lucru este valabil și pentru partea de jos.
Dacă stânga este setată la o valoare negativă, stratul va depăși marginea din stânga a browserului și bara de defilare nu va apărea. Aceasta este o modalitate de a ascunde un element din vedere. Același lucru este valabil și pentru proprietatea de sus, doar stratul va depăși marginea superioară.
Dacă stânga este setată la o valoare mai mare decât lățimea zonei vizibile sau dreapta este setată la o valoare negativă, va apărea o bară de defilare orizontală. O regulă similară funcționează cu top , doar că vom vorbi despre o bară de derulare verticală.
În același timp, proprietățile specificate din stânga și din dreapta formează lățimea stratului, dar numai dacă lățimea nu este specificată. Odată ce adăugați proprietatea width, valoarea corectă va fi ignorată. Același lucru se va întâmpla cu înălțimea stratului, sunt implicate doar proprietățile de sus, de jos și de înălțime.
Un element poziționat absolut se mișcă odată cu documentul pe măsură ce acesta se derulează.

Proprietatea de poziție, setată la absolut, poate fi utilizată pentru a crea un efect de cadru. Pe lângă poziționarea absolută pentru elemente, trebuie să atribuiți proprietății overflow cu valoarea auto . Apoi, când conținutul depășește înălțimea zonei vizibile, va apărea o bară de defilare. Înălțimea și lățimea „cadrelor” sunt generate automat prin utilizarea simultană a proprietăților stânga , dreapta pentru lățime și sus , jos pentru înălțime (exemplul 3.31).

Exemplul 3.31. Crearea unui analog de cadre

Corp de poziționare absolută ( margine: 0; ) #bară laterală, #conținut (poziție: absolut; ) #bară laterală, #conținut (overflow: automat; padding: 10px; ) #header (înălțime: 80px; /* Înălțimea stratului */ fundal: #FEDFC0; chenar-jos: 2px solid #7B5427; ) #header h1 (capă: 20px; margine: 0; ) #bară laterală (lățime: 150px; fundal: #ECF5E4; chenar-dreapta: 1px solid #231F20; sus: 82px ; /* Distanța de la marginea de sus */ jos: 0 /* Distanța de la marginea de jos */ ) #conținut ( sus: 82px; /* Distanța de la marginea de sus */ stânga: /* Distanța de la marginea din stânga; */ jos: 0 ; dreapta: 0 ) Pilaf al popoarelor lumii

Pilaf în stil Fergana

pilaf uzbec

pilaf siberian

pilaf italian

pilaf estonian

pilaf în stil american

Pilaf în stil indian

Puneți carnea tăiată bucăți într-un ceaun și prăjiți-o până se formează o crustă. Prăjiți ceapa, tăiată rondele, împreună cu carnea până la culoarea roșiatică, apoi adăugați morcovii tăiați fâșii. Adăugați jumătate din sare, amestecați totul și prăjiți până când morcovii devin maro auriu. După aceasta, turnați jumătate din cantitatea necesară de apă și lăsați-o să fiarbă.

Acoperiți orezul într-un strat uniform, creșteți căldura și turnați imediat apă, astfel încât să acopere orezul cu 1–1,5 cm. De îndată ce apa s-a evaporat, folosiți o lingură cu fantă pentru a colecta pilaful într-o movilă în mijloc. , străpungeți-l cu un băț în mai multe locuri, astfel încât apa de la suprafață, să ajungă la fund. Apoi acoperiți pilaf-ul și lăsați-l să se odihnească timp de 20-25 de minute.

Se amestecă bine pilaful finit, se transferă într-un vas mare și se așează carnea deasupra.

Rezultatul acestui exemplu este prezentat în Fig. 3.43. Stratul antet este redat în flux ca de obicei, iar bara laterală și straturile de conținut sunt poziționate absolut.

Orez. 3.43. Aplicarea poziționării absolute

În IE6, elementele poziționate absolut nu pot avea proprietăți stânga, dreapta și sus și jos simultan.

Poziționarea absolută este, de asemenea, utilizată pentru a crea diverse efecte, cum ar fi sfaturi pentru instrumente foto. Spre deosebire de atributul title al etichetei care afișează și textul tooltip, prin stiluri puteți controla tipul de text afișat folosind scriptul.

Mai întâi, să creăm un strat gol cu identificatorul floatTip și să definim stilul acestuia. Trebuie să fie necesare trei proprietăți de stil - poziție cu o valoare absolută , afișarea cu o valoare nu ascunde stratul, iar lățime setează lățimea stratului cu un tooltip. Proprietățile rămase sunt utilizate la cererea dezvoltatorului și au scopul de a schimba designul stratului (exemplul 3.32).

Exemplul 3.32. Stilul balon instrument

#floatTip ( poziție: absolut; /* Poziționare absolută */ lățime: 250px; /* Lățime bloc */ afișare: niciuna; /* Ascundere de afișare */ chenar: 1px solid #000; /* Parametri cadru */ padding: 5px ; /* Margini în jurul textului */ font-family: sans-serif /* font-size: 9pt /* Dimensiunea fontului */ culoarea: #333; /* Culoare de fundal */ )

Scriptul în sine constă din două funcții - moveTip() urmărește mișcarea mouse-ului și schimbă poziția stratului în conformitate cu coordonatele cursorului, iar toolTip() controlează vizibilitatea stratului și afișează textul dorit în acesta (exemplul 3.33).

Exemplul 3.33. Script de ieșire layer

Document.onmousemove = moveTip; funcția moveTip(e) ( floatTipStyle = document.getElementById("floatTip").style; w = 250; // Lățimea stratului // Pentru browser IE dacă (document.all) ( x = event.x + document.body.scrollLeft ; y = event.y + document.body.scrollTop // Pentru alte browsere ) else ( x = e.pageX; // Coordonata X a cursorului y = e.pageY; // Coordonata Y a cursorului ) // Afișați stratul din dreapta cursorului dacă ((x + w + 10)< document.body.clientWidth) { floatTipStyle.left = x + "px"; // Показывать слой слева от курсора } else { floatTipStyle.left = x - w + "px"; } // Положение от верхнего края окна браузера floatTipStyle.top = y + 20 + "px"; } function toolTip(msg) { floatTipStyle = document.getElementById("floatTip").style; if (msg) { // Выводим текст подсказки document.getElementById("floatTip").innerHTML = msg; floatTipStyle.display = "block"; // Показываем слой } else { floatTipStyle.display = "none"; // Прячем слой } }

Pentru comoditate și versatilitate, scriptul trebuie plasat într-un fișier separat și conectat prin atributul src al etichetei. Codul final este prezentat în Exemplul 3.34.

Exemplul 3.34. Crearea unui tooltip

Tooltip #floatTip ( poziție: absolut; lățime: 250px; afișare: niciunul; chenar: 1px solid #000; umplutură: 5px; font-family: sans-serif; font-size: 9pt; culoare: #333; fundal: # ECF5E4 ; opacitate: 0,85 /* Transparența stratului */ )

" + "Obiectiv: Canon EF 24-105 f/4L IS USM
" + "Bliț: Canon Speedlite 580 EX
" + "Viteza de expunere: 1/125
Diafragma: 5,6")" onmouseout="toolTip()" />

Rezultatul acestui exemplu este prezentat în Fig. 3.44. Vă rugăm să rețineți că împachetarea textului la apelarea funcției toolTip() este în scopuri de lizibilitate și este în sintaxa JavaScript. În Safari, scriptul uneori nu funcționează atunci când împachetați textul, caz în care textul ar trebui să fie scris pe o singură linie. O proprietate de opacitate CSS3 a fost adăugată stilurilor, ceea ce adaugă o ușoară transparență stratului. Această proprietate nu este acceptată în IE înainte de versiunea 9.0.

Orez. 3.44. Balon explicativ redat folosind JavaScript

Poziția fixă a unui strat este specificată de valoarea fixă a proprietății de poziție și este similară ca efect cu poziționarea absolută. Dar, spre deosebire de acesta, se leagă de punctul de pe ecran specificat de proprietățile stânga, sus, dreapta și jos și nu își schimbă poziția atunci când derulați pagina web. O altă diferență față de absolut este că atunci când un strat fix depășește zona vizibilă în dreapta sau sub ea, nu apar bare de defilare.

Acest tip de poziționare este folosit pentru a crea meniuri, file, anteturi, în general, orice elemente care ar trebui să fie fixate pe pagină și mereu vizibile pentru vizitator. Exemplul 3.35 arată adăugarea unui subsol care rămâne într-un singur loc, indiferent de cantitatea de informații de pe site.

Exemplul 3.35. Subsol fix

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Subsol fix BODY ( margin-bottom: 50px; ) #footer (poziție: fix; /* Poziție fixă */ stânga: 0; jos: 0; /* Colț din stânga jos */ padding: 10px; /* Margini în jurul textului */ fundal: #39b54a; /* Culoare de fundal */ culoare: #fff /* Culoarea textului */ lățime: 100% /* Lățimea stratului */ ) Toate metodele de prindere a leului enumerate pe site sunt teoretice; Autorul nu vă garantează siguranța atunci când le utilizați și își declină orice responsabilitate pentru rezultate. Amintiți-vă, un leu este un prădător și un animal periculos! Vlad Merjevici

Rezultatul exemplului este prezentat în Fig. 3.45. Deoarece subsolul fix suprapune și ascunde textul, a fost adăugată o umplutură de jos pentru selectorul BODY. IE6 nu acceptă valoarea fixă, așa că acest exemplu nu va funcționa corect acolo.

Orez. 3.45. Subsol în partea de jos a paginii

Setarea proprietății de poziție la relativă stabilește poziția elementului în raport cu locația sa inițială. Adăugarea proprietăților stânga, sus, dreapta și jos modifică poziția elementului și îl mută într-o parte sau alta din locația sa inițială. O valoare pozitivă la stânga specifică o deplasare la dreapta de la marginea stângă a elementului, o valoare negativă specifică o deplasare la stânga. O valoare pozitivă a lui top specifică o deplasare în jos a elementului (Fig. 3.46), o valoare negativă specifică o deplasare în sus.

Orez. 3.46. Valorile proprietăților din stânga și de sus pentru poziționarea relativă

Proprietățile de jos și din dreapta au efectul opus. Cu o valoare pozitivă, dreapta deplasează elementul la stânga marginii sale drepte, cu o valoare negativă, îl deplasează spre dreapta (Fig. 3.47). O valoare inferioară pozitivă mută elementul în sus, o valoare inferioară negativă îl mută în jos.

Orez. 3.47. Valorile proprietăților din dreapta și de jos pentru poziționarea relativă

Poziționarea relativă se caracterizează prin următoarele caracteristici.

Acest tip de poziționare nu se aplică elementelor de tabel precum celule, rânduri, coloane etc.
Atunci când un element este deplasat față de poziția sa inițială, spațiul pe care elementul l-a ocupat rămâne gol și nu este umplut de elementele de dedesubt sau de deasupra lui.

Exemplul 3.36 arată textul titlului care se deplasează în jos pentru a-i oferi un stil diferit de scriere.

Exemplul 3.36. Titlul textului

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Titlu H1 ( font: bold 2em Arial, Tahome, sans-serif; /* Opțiuni font */ culoare: #fff; fundal: #375D4C; umplutură: 0 10px; ) H1 SPAN (poziție: relativă; /* Poziționare relativă */ sus: 0,3em /* Mutare în jos */ ) Az și fagi de știință

Un font este un mijloc de exprimare a designului, nu un fel de lectură banală.

Rezultatul acestui exemplu este prezentat în Fig. 3.48.

Orez. 3.48. Schimbați textul față de poziția inițială

De obicei, poziționarea relativă în sine nu este folosită des, deoarece există o serie de proprietăți care îndeplinesc de fapt același rol, de exemplu, aceeași marjă. Dar combinarea diferitelor tipuri de poziționare pentru straturi imbricate este una dintre tehnicile de layout convenabile și practice. Dacă setați relativă pentru elementul părinte și absolută pentru elementul copil, atunci sistemul de coordonate se schimbă și poziția elementului copil este indicată în raport cu părintele său (Fig. 3.49).

Orez. 3.49. Valorile proprietăților din stânga, dreapta, sus și jos în straturi imbricate

Coordonatele sunt numărate de la marginea interioară a graniței nu sunt luate în considerare. Următorul exemplu plasează textul în colțul din dreapta jos al stratului lângă margine, ignorând proprietatea de umplutură.

Text pentru eticheta tabelului, iar celula-tabelă este td. Sfat: în acest exemplu, este interesant să vedem cum se comportă imaginea atunci când dimensiunea ferestrei browserului este redusă. Cum să aliniați textul la dreapta

Text scurt în dreapta

.raz ( text-align: right; ) Text scurt în dreapta .raz ( margine: 0; chenar-sus: solid 2px; padding: 0; overflow: automat; /* clar plutitor */) .raz li ( clear: ambele; ) .raz span ( float: right; white-space: nowrap; /* */ ) Materiale conexe:

alinierea orizontală html a fost actualizată
Vreau să actualizez alinierea lățimii html
Cum să aliniezi un bloc la dreapta
.raz div (latime maxima: 8em; /* blocul ocupă lățimea părintelui, max-width o limitează */ inaltime minima: 2em; margine-stânga: auto; margine-dreapta: 0 ; cod HTML
Elementul nu afectează înălțimea sau lățimea părintelui și nici nu provoacă debordarea acestuia.
.raz ( pozitie: relativ; padding-dreapta: 8em; /* astfel încât elementul să nu fie deasupra conținutului părintelui */) .raz div ( pozitie: absolut; sus: 0 ; /* atașează în partea de sus a părintelui */ dreapta: 0 ; Cod HTML Text
Elementul nu afectează înălțimea părintelui decât dacă plutitorul este șters.
.raz div ( float: dreapta; /* blocul ocupă lățimea conținutului, max-width îl limitează */ latime maxima: 8em; inaltime minima: 2em; chenar: 1px portocaliu solid; fundal: #fff5d7; ) Cod HTML Text
.raz ( text-align: right; ) .raz div ( display: inline-block; /* inline-block ocupă lățimea conținutului, max-width o limitează */ latime maxima: 8em; inaltime minima: 2em; chenar: 1px portocaliu solid; text-align: start; /* elimină moștenirea text-align */ fundal: #fff5d7; ) Cod HTML
Cum să aliniați mai multe blocuri la dreapta
.raz div ( lățime: 8em; lățime maximă: 100%; înălțime minimă: 2em; chenar: 1px portocaliu solid; fundal: #fff5d7; )
.raz ( text-align: right; ) .raz div ( display: inline-block; /* cm. */ latime: 8em; latime maxima: 100%; inaltime minima: 2em; chenar: 1px portocaliu solid; vertical-align: mijloc; /* cm. */ text-align: start; fundal: #fff5d7; )
.raz div ( lățime: 8em; lățime maximă: 100%; înălțime minimă: 2em; margine: 0 0 0 auto; /* la fel ca margin-left: auto; */ chenar: 1px portocaliu solid; fundal: #fff5d7; )
.raz div ( float: dreapta; lățime: 8em; lățime maximă: 100%; înălțime minimă: 2em; chenar: 1px portocaliu solid; fundal: #fff5d7; ) .raz::după ( /* clar plutitor */ continut: ""; afisare: bloc; clar: ambele; ) marja: 0 100% 0 -100%; /* nu trebuie să adăugați un alt wrapper, dar în stilul anterior specificați transform: translate(-100%, 0); */ fundal:verde; ) Cod HTML