Mengatur posisi element ( CSS position property ) `

Bagaimanakah cara mengatur letak / posisi element blog , Apa itu property Position pada CSS .. ?
sebetulnya saya juga masih perlu belajar banyak mengenai CSS ini .namun tidak ada salahnya bila mastony memberikan sedikit penjelasan / Tutorial sederhana mengenai Cara mengatur letak / posisi element Div , img , p , dan lainnya dengan property position pada Css .
Atau silahkan baca mengenai Cara mengatur Letak Element yaitu CSS FLOAT , CLEAR PROPERTY
balik lagi pada posisi Element , untuk selengkapnya mengenai value dari property position ini silahkan lihat tabel dibawah :
POSITION KETERANGAN
  • Static

  • posisi normal (default).
  • Relative

  • posisi elemen tergantung dari elemen yang lain.
  • Absolute

  • posisi elemen berpatokan pada jendela browser.
  • Fixed

  • posisi elemen tetap walaupun digeser.
    contoh Div dengan position Relative dan Fixed sebagai berikut ini :


    POSISI RELATIVE


    Sorce Code
    div {position:relative;top:200px;left:200px;display:block;}


    klik button di atas untuk melihat perubahan posisi dan code css tersebut ,,div
    KETERANGAN : LEFT :200px adalah posisi element di geser dari kiri ke kanan , sedangkan TOP 200px posisi element digeser dari atas kebawah . anda juga dapat menambahkan margin ( jarak element dengan element lainnya ) atau padding ( jarak content dengan element ) .

    Pilih dan tekan navigasi dibawah untuk melihat posisi element dan juga kode css nya .
    Contoh posisi Fixed , relative , absolute

    Posisi Relative | Posisi Absolute | Posisi Fixed
    Source Code

    div{margin:0;padding:0;position:relative;left:0;top:0;display:block;}





    nah gimana ,, saya rasa cukup disini penjelasan mengenai cara Mengatur letak / posisi element ( CSS position property ) ini selesai dan semoga artikelnya bermanfaat untuk sobat ...

    Terima kasih Anda telah membaca Artikel mengenai Mengatur posisi element ( CSS position property ) dan Kata kunci untuk Artikel ini yaitu Mengatur posisi element ( CSS position property )

    8 komentar:

    1. Bermanfaat gan postingannya, saya coba dulu ya gan, jangan lupa folback + comment blog saya ya --> http://novaibnu.blogspot.com/

      BalasHapus
    2. Ic Cream @ makasih sudah sempet berkunjung ...

      BalasHapus
    3. Ada pengaruhnya ga yah kalau kita menempatkan position:static ke css?

      BalasHapus
    4. aldi@ : tergantung kita mau yang kayak gimana .

      BalasHapus
    5. saya lagi nyari cara mengatur jarak postingan dengan bilah pinggir kiri pada kertas/template caranya gimana ya mas?

      BalasHapus
    6. Komentar ini telah dihapus oleh pengarang.

      BalasHapus

    Silahkan Anda Komentarkan Tentang Post ini yang baik dan sopan,
    Jangan sampai komentar anda dianggap spam . . .