Свойство 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;
}

Результат:

Вижте също