Свойство top

Свойството top задава позицията на горния ръб на елемента от горната част на родителския елемент. Стойностите за свойството могат да бъдат записани с общоприети мерни единици, например в пиксели, инчове, точки, проценти. Задаваните стойности могат да бъдат и отрицателни числа, в този случай елементите ще се наслагват един върху друг. Отброяването на координатите се определя от свойството position, което обикновено приема стойност relative (относителна позиция) или absolute (абсолютна позиция).

Синтаксис

cssселектор {
  top: размер или 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;
  margin-left: 50px;
}
p:hover {
  top: 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;
  margin-top: 50px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-left: 50px;
}
p:hover {
  top: -50px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Вижте също