Mengenal Fungsi Properti Css Position

Tanggal : 10 Aug 2018, Category : CSS, Create By : admin

Setelah kemarin kita membahas mengenai properti Css Float kali ini kami akan membahas tentang properti css Position, fungsinya adalah untuk menentukan lokasi atau posisi sebuah element, untuk valuenya terdiri dari (Static, Relative, Fixed, Absolute, Sticky), Mari kita bahas satu persatu 

Static

Value ini memberikan posisi default, artinya tidak terpengaruh oleh properti apapun, hanya memberikan posisi normal, jika anda memberikan properti left, right, top, bottom

Contoh :

 <p>pembuatan artikel mengenal fungsi properti css position
  contoh penggunakan properti css
 </p>
 <div style="position:static; border:solid 1px #FF0000">
  Mengenal Fungsi Properti Css Position
 </div>

Hasil :

Fixed

Fixed artinya adalah Tetap, jadi value ini akan memberikan efek tetap, artinya element yang menggunakan properti ini akan posisinya akan tetap sesuai dengan setingan style anda, tidak akan terpengaruh oleh Scroll, untuk menempatkan element sesuai dengan keinginan anda bisa menggunakan properti lain seperti Left, Right, Top, Bottom, Margin, dll.

Contoh :

 <p>pembuatan artikel mengenal fungsi properti css position
 contoh penggunakan properti css
  </p>
 <div style="position:fixed; margin-left:30%; border:solid 1px #FF0000; width:300px">
  Mengenal Fungsi Properti Css Position
 </div>

 

Absolute

Element yang bervalue absolut, element itu akan bisa mengapung diatas element lainya, tetapi value ini akan terpengaruh dengan Scroll,  anda bisa menggunakan properti lainya seprti margin dll, tidak terpengaruh dengan element utama.

contoh :

 <p>pembuatan artikel mengenal fungsi properti css position
  contoh penggunakan properti css
 </p>
 <div style="position:absolute; margin-top:-20px; border:solid 1px #FF0000; width:300px">
  Mengenal Fungsi Properti Css Position
 </div>

 hasil :

Relative

value ini akan memberikan posisi relatif, artinya value ini hampir mirip dengan Static hanya saja value ini bisa di atur menggunakan Left, Right, Top, Bottom, dll.

 <p>pembuatan artikel mengenal fungsi properti css position
  contoh penggunakan properti css
 </p>
 <div style="position:relative; border:solid 1px #FF0000; width:300px">
  Mengenal Fungsi Properti Css Position
 </div>
Keyword:
  • mengenal fungsi properti css position
  • css
  • properti position css
  • css position

Artikel Lain

Mengenal Html Textarea

Date : 27 Aug 2018, Category : HTML, Create By : admin

Ketika anda mendaftar di sebuah situs sosial media atau situs pendaftran member anda pastinya di haruskan untuk mengisi formulir atau form input data, dan salah satunya ada yang menggunakan Textarea, apa itu Textarea?. Textarea adalah .....

Fungsi Css Float

Date : 08 Aug 2018, Category : CSS, Create By : admin

Dalam script css banyak sekali propertis di dalamnya, seperi backgroud, color, dll, tapi sekarang kita akan membahas tentang propertis css Float, Float dalam bahasa Indonesia artinya adalah mengapung jadi Fungsi Float .....

Menampilkan Nama Hari Di Php

Date : 31 Aug 2018, Category : Tutorial, Create By : admin

Selamat datang kembali di website gudang ilmu aplikasi, setalah kmaren kita membahas mengenai membuat format tanggal indonesia dengan php, kali ini gudang ilmu aplikasi akan membahas kelanjutan dari materi sebelumnya .....