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

Javascript Const And How To Use It

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

In JavaScript, const is a keyword used to declare a constant variable that cannot be reassigned a new value once it has been initialized. Here's how to use it: const pi .....

Membuat Template Html Dan Style Css Sederhana

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

Dalam pembuatan aplikasi berbasis website maka kita tidak akan lepas dengan html, akan sangat penting bagi kita seorang programmer mengerti dan memahami apa itu html dan struktur dalam membuat template .....

Mengenal Substr Php

Date : 27 Dec 2018, Category : Tutorial, Create By : admin

Fungsi substr() adalah fungsi PHP untuk mengambil atau memotong text atau string, substr mengambil sebagian karakter dari sebuah string. Fungsi substr ini cukup sering digunakan dalam pembuatan aplikasi berbasis php. Sebagai contoh sederhananya, .....