Proprietatea top

Proprietatea top stabilește poziția marginea superioară a elementului față de partea de sus a elementului părinte. Valorile pentru proprietate pot fi scrise cu unități de măsură general acceptate, de exemplu, în pixeli, inci, puncte, procente. Valorile setate pot fi și numere negative, în acest caz elementele se vor suprapune unul peste altul. Numărătoarea coordonatelor este determinată de proprietatea position, care de obicei ia valoarea relative (poziție relativă) sau absolute (poziție absolută).

Sintaxă

cssselector {
  top: dimensiune sau auto;
}

Exemplu

Să setăm la hover pe elementul copil o poziție pentru marginea superioară egală cu 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;
}

Результат:

Exemplu

Și acum să facem ca la hover marginea superioară a elementului copil să fie poziționată la -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;
}

Результат:

Vedeți și