Tutorial CSS - Pozitionare

Tutoriale CSS si HTML, tutoriale editare si instalare site-uri in CSS si HTML!
Avatar utilizator
DarkArms
Membru
Mesaje: 3107
Localitate: Reșița, România
Nick server: cleks
Contact:

Tutorial CSS - Pozitionare

Mesaj de DarkArms » Mie Dec 07, 2016 1:36 pm

CSS - Pozitionare

Pozitionarea elementelor este de patru tipuri.

statica
fixa
relativa
absoluta

CSS - Pozitionare statica

Pozitionarea statica este valoarea standard in browser atribuita unui element cand vine vorba de pozitionare.

CSS - Pozitionare fixa

Folosind valuarea "fixed" pentru atributul "position" vom obtine un element pe pagina care are o pozitie fixa indiferent de celelalte elemente. Cu altea cuvinte elementul pluteste in pozitia stabilita chiar daca dam de rotita mouseului. Folosind valoarea "fixed" elementele se pot suprapune, celelalte elemente comportanduse ca si cand elementul fix nu ar exista.

Cod: Selectaţi tot

.pozitie_fixa {
	position:fixed;
	top:25px;
	right:10px;
}
Mentiune:

IE nu interpreteaza acest atribut daca nu este specificat un !DOCTYPE.

CSS - Pozitionare relativa

Pozitionarea relativa se refera la o pozitie diferita fata de pozitia statica

Cod: Selectaţi tot

.pozitionare_relativa {
	position:relative;
	left:15px;
	top:30px;
}
Valorile lui top si left pot fi deasemenea negative.

Cod: Selectaţi tot

.pozitionare_relativa{
	position:relative; 
	left:-15px;
	top:-30px;
}
Folosind aceasta pozitionarea relativa pot fi suprapuse mai multe emente.

Cod: Selectaţi tot

<style type="text/css">
	.element_suprapus {
		position:relative;
		top:-20px;
	}
</style> 

<h2>Acest element are o pozitionare statica</h2>
<h2 class="element_suprapus">Titlul va fi urcat mai sus fata de pozitia initiala</h2>
<p><strong>Note:</strong> Trebuie mentionat ca spatiul corespunzator elementului, va fi pastarat</p>
De multe ori pozitionarea relativa sau div-urile pozitionate relativ sunt folosite ca si container pentru alte divuri sau elemente pozitionate absolut.

CSS - Pozitionare absoluta

Elementele pozitionate absolut vor fi pozitionate in functie de primul alement parinte care are o pozitionare non-statica. Daca nu este gasit un astfel de element, elementul parinte va fi considerat <html>.

Spatiul rezervat elementelor pozitionate absolut nu va fi pastrat. In acest sens celelalte elemente se comporta ca si cand elementul pozitionat absolut nu ar exista. In felul acesta se pot suprapune mai multe elemente.

Cod: Selectaţi tot

p {
	position:absolute;
	left:200px;
	top:200px;
}
Suprapunerea mai multor elemente in CSS

Cu ajutorul CSS pot fi suprapuse mai multe elemente.
Vom folosi atributul z-index pentru a specifica ordinea elementelor. z-index poate avea atat valori pozitive cat si negative.

Cod: Selectaţi tot

<html>
	<head>
		<style type="text/css">
			img {
				position:absolute;
				left:0px;
				top:0px;
				z-index:-1;
			}
		</style>
	</head> 
	<body>
		<h1>Suprapunerea mai multor elemente in CSS</h1>
		<img src="imagine.jpg" width="100" height="100" />
		<p>Vom folosi atributul z-index pentru a specifica ordinea elementelor. z-index poate avea atat valori pozitive cat si negative.</p>
	</body>
</html>
Datorita faptului ca "z-index"-ul imagini are valoarea -1, imaginea va fi pozitionata in spatele textului. De aici regula ca un element cu "z-index" mai mare va fi pozitionat in fata unui element cu "z-index" mai mic.

Înapoi la “Tutoriale CSS si HTML”

Cine este conectat

Utilizatori ce ce navighează pe acest forum: Niciun utilizator înregistrat și 1 vizitator