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

Membuat Validasi Input Data Email Dan Url Website Php

Date : 25 Jul 2018, Category : Tutorial, Create By : admin

Selamat datang di website gudangilmuaplikasi.com, kali ini kami akan membahas tentang membuat validasi input data email dan url website php menggunakan filter_var dan preg_match, pada dasarnya tutorial validasi yang kami sampaikan hanya dasar .....

Operator Php

Date : 17 Oct 2018, Category : Tutorial, Create By : admin

Operator pastinya tidak asing karena dari kita belajar di kelas 1 sekolah dasar kita sudah di ajari mengenai operator untuk perhitungan angka, di dalam bahasa pemprograman php operator yang di .....

How Use Code If On Python

Date : 13 Feb 2023, Category : Tutorial, Create By : admin

The if statement in Python is used to control the flow of the program based on certain conditions. When a condition is met, the code inside the if block is .....