bottom Özelliği

bottom özelliği, bir öğenin alt kenarının konumunu belirler. Özellik için değerler, piksel, inç, punto, yüzde gibi yaygın ölçü birimleriyle yazılabilir. Belirlenen değerler negatif sayılar da olabilir, bu durumda öğeler üst üste binecektir. Koordinatların başlangıcı, genellikle relative (göreli konum) veya absolute (mutlak konum) değerini alan position özelliği tarafından belirlenir.

Sözdizimi

cssseçici {
  bottom: ölçü birimli sayı veya auto;
}

Örnek

Alt öğenin üzerine gelindiğinde, alt kenar konumunu 25px olarak ayarlayalım:

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

css#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;
}

Результат:

Örnek

Şimdi de, üzerine gelindiğinde alt öğenin alt kenarının -50px konumunda olmasını sağlayalım:

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

css#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;
}

Результат:

Ayrıca Bakınız