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

Beberapa Fungsi Change Case Dalam Pemprograman Php

Date : 07 Jan 2019, Category : Tutorial, Create By : admin

Tentunya kita tidak asing dengan apa itu Change Case atau perubahan jenis text, perubahan jenis text disini meliputi, huruf besar atau huruf kapital dan huruf kecil, dalam aplikasi Ms. Word kita .....

Html Iframes And How To Use It

Date : 15 Feb 2023, Category : HTML, Create By : admin

HTML iframes (inline frames) are used to embed external content such as web pages, images, videos, and other types of media within an HTML document. Here's how to use them: To .....

Javascript Statements And How To Use Them

Date : 15 Feb 2023, Category : JavaScript, Create By : admin

JavaScript statements are individual instructions that tell the browser or JavaScript engine what to do. Here are some common types of JavaScript statements: Expression statements: An expression statement is simply an .....