Bottom xususiyati

bottom xususiyati elementning pastki chetini joylashni belgilaydi. Xususiyat uchun qiymatlar oʻlchov birliklari bilan, masalan, piksellar, dyuymlar, punktlar, foizlarda berilishi mumkin. Belgilangan qiymatlar manfiy sonlar ham boʻlishi mumkin, bu holda elementlar bir-birining ustiga qoʻyiladi. Koordinatalarning hisoblanishi position xususiyati bilan belgilanadi, bu odatda relative (nisbiy joylash) yoki absolute (absolyut joylash) qiymatlarini qabul qiladi.

Sintaksis

cssselektor {
  bottom: oʻlchov birligi bilan son yoki auto;
}

Misol

Keling, child elementga sichqoncha olib borilganda uning pastki chetini joylashini 25px ga tenglaymiz:

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

Результат:

Misol

Endi esa child elementning pastki cheti -50px da joylashsin:

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

Результат:

Shuningdek qarang