Memposisikan absolute dalam relative

Printer-friendly versionSend to friend

Saya sharing sedikit mengenai technical pembuatan website. Kalau mau menempatkan posisi website drpd pusing2 pakai kolom2 div kalau isinya sedikit, saya biasanya pake atribut top dan left dalam css, dimana memakai position absolute di dalam div relative.

Misalnya penempatan logo ataupun menu utama. Pakai aja seperti ini:

<div id="header" style="position:relative;">

  <div id="logo" style="position:absolute; top:20px; left:10px;">

    Isi logo

  </div>

  <div id="menu" style="position:absolute; top:100px; left:10px;">

    Isi menu

  </div>

</div>

Posisi logo dan menu top dan leftnya akan relatif terhadap posisi headernya. So, dimanapun headernya berada, bila logo top:0, maka posisi teratas logo akan menempel pada bagian atas header.