Pozitionare elemente HTML cu CSS

Pozitionarea elementelor folosind CSS este mai precisa decat prin intermediul obiectelor grafice HTML sau a tabelelor, afisarea facandu-se mult mai rapid.
Prin intermediul CSS este permisa pozitionarea exacta sau relativa a elementelor intr-o fereastra sau in raport cu alte elemente.
Toatele elementele amplasate in fereastra sunt pozitionate relativ la coltul din stanga-sus.

Proprietatea position

Cu proprietatea position se poate specifica pozitia elementului in pagina web.
Un element poate avea una din urmatoarele valori de pozitionare: static, relative, absolute si fixed.

Pozitionarea statica

Valoarea initiala, prestabilita, a pozitionarii elementelor in fereastra este "static".
Cand nu este specificata o pozitionare "relativa", "absoluta" sau "fixa"; elementele sunt dispuse unul dupa altul in interiorul documentului.
Sintaxa:

selector { position:static; }

- Un element static nu poate fi repozitionat in mod explicit.

Pozitionarea relativa

Un element cu pozitionare "relativa" este amplasat la locul sau in cadrul elementului parinte. Apare dupa toate elementele dinaintea sa, respectiv inaintea tuturor elementelor amplasate dupa el.
Sintaxa:

selector { position:relative; }

- Elementele pozitionate relativ pot fi mutate din locatia lor folosind proprietatile "top" si "left" sau "bottom" si "right".

Pozitionarea absoluta

Pozitionarea absoluta are ca efect crearea unui element neafectat de restul documentului, plasarea lui in fereastra fiind facuta intr-o locatie precisa, definita prin intermediul coordonatelor X si Y, indiferent de pozitiile altor elemente.
Sintaxa:

selector { position:absolute; }

- Originea (punctul de coordonate 0,0) este coltul din stanga-sus al obiectului (care are "position: relative") in care este inclus elementul pozitionat absolut.

Pozitionarea fixa

Pozitionarea fixa se face in raport cu fereastra browser-ului, iar la derularea paginii elementul fixat ramane pe pozitia lui initiala, fara a se derula.
Sintaxa:

selector { position:fixed; }

Pozitionarea in raport cu latura de sus, respectiv stanga

Dupa stabilirea tipului de pozitionare, se poate determina distanta intre punctul de origine si laturile de sus si din stanga ale elementului parinte, folosind proprietatile: top si left
Forma generala este:

selector {
position: valoare;
top: valoare;
left: valoare;
}

- La 'top' si 'left', "valoare" poate fi:

- o valoare de tip numeric: px, em, cm
- o valoare procentuala (%);
- valoarea auto, lasa la modul de afisare a browser-ului.

De asemenea, pot lua si valori negative.

Iata un exemplu in care tag-ul <h3> va fi pozitionat la o distanta de 25 pixeli fata de marginile sus si stanga ale unui DIV parinte:

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
div {
border:1px solid #0000d0;
position:relative;
height:150px;
width:250px;
}
div h3 {
margin:0;
position:relative;
top:25px;
left:25px;
}
</style>
</head>
<body>
<div>
<h3>Tutorial css - position</h3>
</div>
</body>
</html>

Pozitionarea in raport cu latura de jos, respectiv dreapta

Pozitionarea in raport cu laturile de jos, respectiv dreapta se poate aplica in cazul pozitionarilor "absolute" sau "fixed". Originea de referinta va fi coltul din dreapta-jos al elementului parinte.
Definirea distantei fata de latura de jos, respectiv din dreapta se face cu proprietatile: bottom si right; ele pot lua aceleasi valori ca si "left" si "top", de asemenea pot fi combinate cu acestea.
Forma generala este:

selector {
position: absolute | fixed;
bottom:valoare;
right:valoare;
}

- Exemplu: tag-ul <h3> va fi pozitionat la o distanta de 25 pixeli fata de marginile de jos si dreapta ale unui DIV parinte:

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
div {
border:1px solid #0000d0;
position:relative;
height:150px;
width:250px;
}
div h3 {
margin:0;
position:absolute;
bottom:25px;
right:25px;
}
</style>
</head>
<body>
<div>
<h3>Tutorial css - position</h3>
</div>
</body>
</html>

In cazul in care pentru acelasi element sunt stabilite atat marginile "top / left" cat si "bottom / right", rezultatul afisat depinde de navigator, dar in mod prestabilit se folosesc pozitiile top / left.

Includerea unui element absolut in unul relativ

In cazul includerii unui element pozitionat absolut intr-un element pozitionat relativ, elementul absolut este pozitionat folosind ca origine coltul din stanga-sus al elementului relativ.
- Iata un exemplu in care o eticheta <div> (cu class="absolut") este inclusa in alta eticheta <div> (cu class="relativ"):

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
.relativ {
border:1px solid #0000d0;
position:relative;
height:150px;
width:250px;
}
.absolut {
background:#bdbdfb;
position:absolute;
margin:0;
top:30px;
left:30px;
height:90px;
width:150px;
}
</style>
</head>
<body>
<div class='relativ'>
Inainte de Div.
<div class='absolut'>Div-ul .absolut</div>
 Dupa Div.
</div>
</body>
</html>

Includerea unui element relativ in unul absolut

In cazul in care un element pozitionat relativ este plasat in interiorul unui element pozitionat absolut, acesta se va deplasa o data cu elementul absolut.
Iata un exemplu de cod HTML in care o eticheta <div> (cu class="relativ") este inclusa in alta eticheta <div> (cu class="absolut"):

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
.absolut {
border:1px solid #0000d0;
position:absolute;
margin:0;
top:40px;
left:50px;
height:150px;
width:250px;
}
.relativ {
background:#bdbdfb;
position:relative;
height:90px;
width:150px;
}
</style>
</head>
<body>
<div class='absolut'>
Div-ul .absolut.
<div class='relativ'>Div-ul .relativ</div>
</div>
</body>
</html>

Pozitionarea in spatiu 3D

Elementele pot primi o a treia dimensiune, si anume asezarea lor in stiva, unele in raport cu altele.
Amplasarea se face in mod automat, incepand cu valoarea 0 si continuand prin incrementare cu o unitate, in ordinea aparitiei lor in documentul HTML si relativ la elementele parinte.
Pentru pozitionarea elementelor in stiva unele peste altele se foloseste proprietatea z-index.
Valoarea acestei proprietati aduce elementul in fata sau in sptele altor obiecte HTML din pagina.
Sintaxa generala:

selector { z-index:valoare; }

Unde "valoare" este un numar intreg, pozitiv, 0 sau negativ.
In cazul in care continutul elementelor se suprapune, elementul cu numarul de ordine mai mare apare deasupra elementului cu numar mai mic.
Utilizarea unei valori negative determina amplasarea elementului dedesubtul parintelui.

- Exemplu, Div-ul #dv1 e pozitionat absolut si, datorita proprietatii "z-index" apare deasupra Div-ului #dv2 care e dupa el.

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
.parent {
border:1px solid #0000d0;
position:relative;
height:180px;
width:280px;
}
#dv1 {
background:#bdbdfb;
position:absolute;
top:40px;
left:50px;
height:100px;
width:150px;
z-index:9999;
}
#dv2 {
background:#ebeb00;
height:100px;
width:150px;
}
</style>
</head>
<body>
<div class='parent'>
<div id='dv1'>Div-ul #dv1</div>
<div id='dv2'>Div-ul #dv2</div>
</div>
</body>
</html>

<<-Afisare si chenare din .. -- Configurari pentru vizibilitate si ..->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Care tag este element de tip bloc?

<div>Web Programming and Development</div>

Care cod CSS afiseaza textul subliniat?

font-style: italic; text-decoration: underline; font-weight: 500;

h2 {
  text-decoration: underline;
}

Clic pe functia JavaScript care apeleaza o alta functie dupa un anumit timp.

insertBefore() setTimeout() querySelector()

function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);

Clic pe instructiunea care returneaza numarul total de elemente dintr-un array asociativ.

count($array) count($array, 1) strlen()

$food =["fruits" =>["banana", "mar"), "veggie" =>["ceapa", "rosie"));
$nr_food = count($food, 1);
echo $nr_food;       // 6

Indicati Viitorul Perfect la negativ al verbului din paranteze, in propozitia: "The child (to not play) by Sunday".

has't played haven't been playing will haven't played

The child will haven't played by Sunday.
- Copilul nu s-ar fi jucat pana duminica.

Indicati Viitorul Perfect pentru verbul "contar" (a povesti) la forma "Él".

habrá contado va a contar contaba

Él no habrá contado el cuento.
- El nu ar fi spus povestea.