Properti top

Properti top mengatur posisi tepi atas elemen dari atas elemen induk. Nilai untuk properti dapat ditulis dengan satuan ukuran yang umum, misalnya, dalam piksel, inci, poin, persen. Nilai yang ditetapkan juga dapat berupa angka negatif, dalam hal ini elemen akan saling tumpang tindih. Perhitungan koordinat ditentukan oleh properti position, yang biasanya mengambil nilai relative (posisi relatif) atau absolute (posisi absolut).

Sintaks

cssselektor {
  top: ukuran atau auto;
}

Contoh

Mari saat mengarahkan kursor ke elemen anak atur posisi batas atasnya menjadi 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;
}

Результат:

Contoh

Sekarang mari saat mengarahkan kursor, batas atas elemen anak akan ditempatkan pada -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;
}

Результат:

Lihat juga