Propriedade bottom

A propriedade bottom define a posição da borda inferior do elemento. Os valores para a propriedade podem ser escritos com unidades de medida comuns, por exemplo, em pixels, polegadas, pontos, porcentagem. Os valores definidos também podem ser números negativos, neste caso, os elementos se sobreporão uns aos outros. A contagem das coordenadas é determinada pela propriedade position, que geralmente assume o valor relative (posição relativa) ou absolute (posição absoluta).

Sintaxe

seletor {
	bottom: número com unidade de medida ou auto;
}

Exemplo

Vamos definir, ao passar o mouse sobre o elemento filho, a posição de sua borda inferior como 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;
}

Exemplo

Agora, ao passar o mouse, vamos fazer com que a borda inferior do elemento filho esteja posicionada em -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;
}

Veja também

a propriedade top,
que define a posição da borda superior do elemento
a propriedade left,
que define a posição da borda esquerda do elemento
a propriedade right,
que define a posição da borda direita do elemento
o pseudoelemento ::backdrop,
que define o posicionamento atrás do primeiro elemento
a propriedade caption-side,
que define a posição da legenda da tabela