Poziția în css, lecții, webreference

Proprietatea Poziția - este o caracteristică versatil și puternic. Acesta vă permite să setați sau să modificați poziția elementului și conține patru valori posibile:

  • static (implicit)
  • rudă
  • absolut
  • fix

Acesta este adesea folosit împreună cu cele patru proprietăți de coordonate:

Aceasta este poziția implicită. elemente statice urmați pur și simplu fluxul natural. Orice valoare din stânga. dreapta. sus sau de jos nu au nici un efect.

Atunci când poziția relativă este setată. element poate deplasa în raport cu poziția sa actuală.

Să trecem al doilea paragraf:

Roșu punctul mutat de până la 20px de la stânga la dreapta și de sus în jos 10px în raport cu poziția sa naturală, unde trebuia să fie.

Rețineți că pasajele albastre nu s-au mutat deloc. Când se folosește poziționarea relativă, punctul roșu este liber să se deplaseze fără a rupe aspectul. Singurul lucru care sa mutat de la locul ei, astfel încât acesta este elementul în sine. Toate celelalte elemente nu sunt conștienți de faptul că elementul a mutat.

Atunci când poziția este setată absolut. element poate fi deplasat în raport cu primul strămoș poziționat.

Poziționat? Ce este elementul poziționat?

Element Poziționat - este una a cărei poziție este stabilită ca o rudă. absolută sau fixă. Astfel, în cazul în care nici o poziție este static, atunci elementul este poziționat.

Element poziționat caracteristic este că poate acționa ca un punct de referință pentru copiii lor.

Să ne imaginăm o ierarhie simplă:

secțiunea galbenă are o înălțime de 200px, iar poziționarea este setată ca relativă. ceea ce face un punct de referință pentru toți copiii.

punctul verde este poziționat ca un absolut, și se pot deplasa liber în raport cu secțiunea galbenă. Setați ambele valori din stânga și de jos. l-am muta la colțul din stânga jos.

Ce se întâmplă dacă am setat simultan stânga și dreapta?

Dacă lățimea nu este specificată, la stânga aplicare și 0 dreapta: element de 0 se întinde pe întreaga lățime. Acest lucru este echivalent cu setarea din stânga: 0 și lățime: 100%.

Dacă lățimea este setată, valoarea din dreapta este eliminată.

Atunci când poziția este stabilită ca fixă. acționează ca un absolut. puteți seta coordonatele stânga / dreapta și de sus / jos.

articole similare