Bottom қасиеті

bottom қасиеті элементтің төменгі шетінің орналасуын белгілейді. Қасиетке мәндерді жалпы қабылданған өлшем бірліктерімен жазуға болады, мысалы, пикселмен, дюйммен, пунктпен, пайызбен. Белгіленетін мәндер теріс сандар да болуы мүмкін, бұл жағдайда элементтер бір-бірінің үстіне қабаттасады. Координаттардың есебі position қасиетімен анықталады, ол әдетте relative (салыстырмалы орналасу) немесе absolute (абсолютті орналасу) мәнін қабылдайды.

Синтаксис

cssселектор {
  bottom: өлшем бірлігі бар сан немесе auto;
}

Мысал

Келіңіздер, бала элементке курсорды апарып қойған кезде оның төменгі шекарасының орнын 25px тең етіп белгілейік:

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

Результат:

Мысал

Енді бала элементтің төменгі шекарасы -50px болсын:

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

Результат:

Сондай-ақ қараңыз