Kursus Membuat Web

iklan

Positioning CSS

Menentukan posisi terkadang sulit !

Menentukan elemen yang akan ditampilkan di depan !

Elemen bisa tumpang-tindih !

Position

Property position di CSS mengijinkan Anda untuk mengatur posisi elemen. Hal ini berarti Anda juga bisa menempatkan elemen dibelakang elemen yang lain, dan juga dapat menentukan apa yang akan terjadi jika isi elemen terlalu besar.

Elemen bisa di posisikan menggunakan property top, bottom, left, and right. Namun, property ini tidak akan bekerja jika property position tidak diatur pertama sekali. Mereka juga bekerja berbeda tergantung metode posisinya.

Ada empat metode penentuan posisi yang berbeda.

Posisi Statis

Elemen HTML diposisikan statis secara default. Posisi elemen statis selalu diposisikan sesuai dengan aliran normal dari halaman.

elemen diposisikan stais tidak dipengaruhi oleh property top, bottom, left, dan right.

Posisi Tetap (fixed)

Sebuah elemen dengan posisi tetap diposisikan relatif terhadap window browser, dan tidak akan bergerak bahkan jika window di scroll:

Contoh
p.pos_fixed {
    position: fixed;
    top: 30px;
    right: 5px;
    color: red;
}
Lihat ...

Catatan : IE7 dan IE8 mendukung nilai tetap hanya jika <!DOCTYPE html> dideklarasikan.

elemen diposisi tetap dikeluarkan dari aliran normal.

Elemen diposisi tetap bisa tumpang tindih dengan elemen lainnya.

Posisi Relatif (relative)

Sebuah elemen diposisi relatif diposisikan relatif terhadap posisi normal:

Contoh
h2.pos_left {
    position: relative;
    left: -20px;
}

h2.pos_right {
    position: relative;
    left: 20px;
}
Lihat ...

Isi dari elemen yang diposisikan relatif bisa dipindahkan dan tumpang tindih dengan elemen lainnya, tapi ruang yang dicadangkan untuk elemen tersebut masih dipertahankan dalam aliran normal.

Contoh
h2.pos_top {
    position: relative;
    top: -30px;
}
Lihat ...

Posisi Absolut (absolute)

Sebuah posisi elemen absolut diposisikan relatif bagi elemen induk (parent) pertama yang memiliki posisi lain selain statis :

Contoh
h2 {
    position: absolute;
    left: 100px;
    top: 150px;
}
Lihat ...

Elemen diposisi absolut dihapus dari aliran normal.

Tumpang Tindih Elemen

Bila elemen diposisikan diluar aliran normal, mereka bisa tumpang tindih dengan elemen lainnya.

Property z-index menentukan urutan tumpukan dari elemen (yang mana elemen yang akan ditempatkan di depan, atau dibelakang yang lainnya.).

Sebuah elemen bisa pada urutan tumpukan negatif atau positif :

Contoh
div {
	width:300px;
	height:300px;
	background-color:red;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: -1;
}
Lihat ...

Sebuah elemen dengan urutan tumpukan lebih besar akan selalu di depan dari elemen dengan urutan tumpukan lebih kecil.

Catatan : jika dua elemen diposisi tumpang tindih tanpa ditentukan z-index nya, elemen diposisi terakhir di kode HTML akan di tampilkan di atas.

Contoh - Contoh Lain

div {
	width:300px;
	height:300px;
	background-color:red;
	position: absolute;
	clip: rect(0px,60px,200px,0px);
}

Mengatur bentuk elemen

Contoh ini menunjukkan bagaimana mengatur bentuk dari elemen. Elemen dipotong kedalam bentuk ini dan ditampilkan.

div.scroll {
    background-color: #00FFFF;
    width: 100px;
    height: 100px;
    overflow: scroll;
}

div.hidden {
    background-color: #00FF00;
    width: 100px;
    height: 100px;
    overflow: hidden;
}

Bagaimana menampilkan overflow dalam sebuah elemen menggunakan scroll

Contoh ini menunjukkan bagaimana mengatur property overflow untuk membuat sebuah scroll bar bila isi elemen terlalu besar untuk di fitkan dalam area yang telah ditentukan.

div {
    background-color: #00FFFF;
    width: 150px;
    height: 150px;
    overflow: auto;
}

Bagaimana mengatur browser untuk menangani secara otomatis overflow

Contoh ini menunjukkan bagaimana mengatur untuk menangani secara otomatis overflow.

Merubah kursor

Contoh ini menunjukkan bagaimana untuk merubah kursor.

Semua Property Position CSS

Property Keterangan Nilai
bottom Menetapkan posisi bottom auto
length
%
inherit
clip Memotong elemen diposisi absolut shape
auto
inherit
cursor Menentukan type dari cursor untuk ditampilkan url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
left Menetapkan posisi left auto
length
%
inherit
overflow Menetapkan apa yang terjadi jika isi overflow dari kotak elemen auto
hidden
scroll
visible
inherit
position Menetapkan type posisi dari elemen absolute
fixed
relative
static
inherit
right Menetapkan posisi right auto
length
%
inherit
top Menetapkan posisi top auto
length
%
inherit
z-index Menetapkan urutan tumpukan dari elemen number
auto
inherit

Sebelumnya ...   Berikutnya ...

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015