Position si z-index

postat acum 4 ani de Stefanescu Mihai in categorie CSS

Aceasta proprietate permite pozitionarea unui element HTML. Poate pozitiona un element in spatele altuia si poate determina ce se intampla cu continutul unui element cand acesta este prea mare.

Elementele pot fi pozitionate folosind proprietatile top, bottom,  left si right, dar trebuie sa tinem minte ca acestea nu functioneaza daca nu este setata mai intai pozitia elementului si functioneaza diferit in functie de valoarea data positiei.

Exista 4 tipuri de pozitii:

  • Static
  • Fixed
  • Relative
  • Absolute

Acum le voi lua pe rand si le voi explica.

Static

Elementele HTML au position static in mod normal. Un element cu position static este intotdeauna pozitionat ca si orice alt element HTML din pagina.

Elementele cu acest tip de pozitionare nu sunt afectate de proprietatile top, bottom, left si right.

Fixed

Acest tip de positioning permite fixarea pozitiei unui element HTML intr-un loc dat si va ramane acolo indiferent de scroll, iar coordonatele pozitiei acestuia vor fi relative ferestrei browserului.

Puteti folosi top si left impreuna cu position pentru a muta elementul HTML oriunde in pagina (setand left si top fie cu valori pozitive pentru directia normala fie valori negative pentru directia opusa).

<div style="position:fixed;left:0px;top:45px;
            background-color: lightgray;">
Acest div este fixed.
</div>

Relative

Acest tip de position modifica pozitia elementului HTML relativ fata de pozitia lui normala. Deci daca unui element cu position: relative; ii dam un left: 50px; va adauga 50px in partea din stanga elementului.

Putem folosi acest tip de position pentru a suprapune 2 elemente, dar spatiul care ar fi fost ocupat de elementul cu position relative va ramane gol, nu va fi preluat de alt element.

h2.topElement {
    position: relative;
    top: -50px;
}

Absolute

Un element HTML cu position absolute va fi pozitionat la coordonatele specificate calculate relativ fata de coltul stanga-sus al ecranului (similar Java).

Elementele cu position absolute nu sunt luate in calcul printre celelalte elemente, ca si cand nu ar fi acolo, dar vor fi suprapuse acestora.

span{
    position: absolute;
    left: 100px;
    top: 150px;
}

Suprapunere elemente

Cand este folosit position si elementele sunt scoase din parcursul normal al unei pagini web acestea pot fi suprapuse cu usurinta.

Am sa vorbes acum de z-index, proprietatea ce specifica ordinea elementelor suprapuse (In ce ordine vor fi suprapuse elementele).

<div style="background-color:red;
	width:300px;
	height:100px;
	position:relative;
	top:10px;
	left:80px;
	z-index:2">
</div>
<div style="background-color:yellow;
	width:300px;
	height:100px;
	position:relative;
	top:-60px;
	left:35px;
	z-index:1;">
</div>
<div style="background-color:green;
width:300px;
	height:100px;
	position:relative;
	top:-220px;
	left:120px;
	z-index:3;">
</div>

Codul de mai sus va avea urmatorul rezultat:

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!

Comentariu postate de minecraft free download pc la data de 14.05.2019
Hey there just wanted to give you a quick heads up and let you know a few of the images aren't loading correctly. I'm not sure why but I think its a linking issue. I've tried it in two different internet browsers and both show the same outcome.
Comentariu postate de minecraft download pc la data de 15.05.2019
What's up all, here every one is sharing these know-how, thus it's nice to read this website, and I used to pay a visit this web site daily.
Comentariu postate de minecraft pc download la data de 15.05.2019
Heya i'm for the first time here. I found this board and I to find It truly useful & it helped me out much. I'm hoping to provide something again and aid others like you aided me.
Comentariu postate de minecraft pc download la data de 16.05.2019
You are so interesting! I don't suppose I have read something like this before. So wonderful to discover another person with some genuine thoughts on this subject matter. Really.. many thanks for starting this up. This site is one thing that is needed on the internet, someone with some originality!
Comentariu postate de free minecraft download la data de 17.05.2019
It's very easy to find out any matter on web as compared to textbooks, as I found this paragraph at this website.
Comentariu postate de jordan retro la data de 18.05.2019
I must show appreciation to you for rescuing me from this particular issue. Just after researching throughout the online world and seeing proposals which were not helpful, I figured my life was well over. Being alive minus the strategies to the problems you've sorted out by means of this short article is a crucial case, as well as the kind which might have adversely affected my entire career if I hadn't encountered the blog. Your personal knowledge and kindness in controlling all the details was crucial. I'm not sure what I would have done if I hadn't come upon such a step like this. I can also now relish my future. Thanks a lot very much for this skilled and results-oriented help. I will not hesitate to endorse the website to anyone who needs to have direction about this issue.