Belajar CSS Part 8 : Mengenal Position CSS

CSSCSS Dasar

Malas Ngoding

Belajar CSS position css

Belajar CSS Part 8 : Mengenal Position CSS

Belajar CSS Mengenal Position CSS

Position pada CSS di gunakan untuk mengatur posisi sebuah element HTML. terkadang kita ingin membuat atau menetapkan posisi sebuah element dengan element yang lain. maka dengan menggunakan property position CSS ini kita dapat menentukan posisi sebuah element HTML sesuai dengan yang kita inginkan. belajar css mengenal position css.

Adapun beberapa property CSS yang dapat digunakan untuk menentukan posisi sebuah element HTML adalah

  • static
  • relative
  • fixed
  • absolute

secara umum untuk membuat posisi atau menetapkan posisi sebuah element kita pasti menggunakan property css lainnya seperti mengatur top, left, bottom, right untuk menetapan posisi sebuah element. tetapi property tersebut tidak akan bekerja jika position belum di atur terlebih dahulu. karena property lain tergantung dengan position yang di tetapkan.

Static

position static digunakan untuk mengatur element menjadi statis secara default. element akan mengikuti posisi normal secara default. belajar css mengenal position css

contoh penggunaan position static

 

index.html

style.css

contoh position static css

contoh position static css

Relative

Sebuah element HTML yang menggunakan position relative akan terletak pada posisi normal.

index.html

style.css

contoh position relative css

contoh position relative css

Fixed

Sebuah element HTML yang di setting dengan position fixed akan memiliki sifat tetap. tanpa ada perubahan bahkan jika halaman website di scroll. berlaku pengaturan left, bottom, top dan right pada position fixed.

index.html

style.css

Belajar CSS Mengenal Position CSS

contoh position fixed css

Absolute

Element HTML yang menggunakan position absolute akan tertimpa dengan element lain. position adalah salah satu property position css yang sangat berguna. salah satunya adalah untuk membuat menu dropdown dengan HTML dan CSS.

Belajar CSS Mengenal Position CSS

contoh position absolute css

sekian tutorial belajar CSS Mengenal position css. akan di lanjutkan pada tutorial CSS selanjutnya di www.malasngoding.com.

Incoming search terms:

  • mengenal posisi absolut css



Write a Comment

Your email address will not be published. Required fields are marked *