Proprietatea bottom

Proprietatea bottom stabilește poziția marginii inferioare a elementului. Valorile pentru proprietate pot fi scrise cu unități de măsură general acceptate, de exemplu, în pixeli, inci, puncte, procente. Valorile setate pot fi și numere negative, în acest caz elementele se vor suprapune unul peste altul. Numărătoarea inversă a coordonatelor este determinată de proprietatea position, care de obicei ia valoarea relative (poziție relativă) sau absolute (poziție absolută).

Sintaxă

selector {
	bottom: număr cu unitate de măsură sau auto;
}

Exemplu

Să setăm la hover pe elementul copil o poziție a marginii inferioare egală cu 25px:

<div id="elem">
	<p></p>
</div>

#elem {
	width: 400px;
	height: 300px;
	border: 1px solid black;
}
p {
	position: relative;
	width: 100px;
	height: 100px;
	border: 1px solid red;
	margin-top: 50px;
}
p:hover {
	bottom: 25px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

Exemplu

Și acum să fie ca la hover marginea inferioară a elementului copil să fie poziționată la -50px:

<div id="elem">
	<p></p>
</div>

#elem {
	width: 400px;
	height: 300px;
	border: 1px solid black;
}
p {
	position: relative;
	width: 100px;
	height: 100px;
	border: 1px solid red;
	margin-top: 50px;
}
p:hover {
	bottom: -50px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

Vedeți și

proprietatea top,
care stabilește poziția marginii superioare a elementului
proprietatea left,
care stabilește poziția marginii stângi a elementului
proprietatea right,
care stabilește poziția marginii drepte a elementului
pseudoelementul ::backdrop,
care stabilește poziționarea după primul element
proprietatea caption-side,
care stabilește poziția titlului tabelului