Bab XII CSS : Display, Positioning, dan Floating Page 1 of 5

PERANCANGAN WEB

Beranda Rule Tugas Quiz UTS UAS

Pada dasarnya setiap elemen HTML mempunyai tampilan block atau inline. Elemen yang mempunyai tampilan block seperti
p , di mana elemen tersebut akan menggunakan satu baris penuh dari elemen induknya, sehingga jika ada elemen lain setelah
atau sebelum elemen tersebut, maka elemen lain akan ditampilkan pada baris terpisah. Sedangkan elemen yang mempunyai
tampilan inline seperti a , elemen ini akan mengambil tempat secukupnya saja, sehingga dapat ditampilkan bersama dengan
elemen lainnya dalam satu baris yang sama.

Properti Nilai Deskripsi CSS

cursor alias Menentukan tipe kursor yang akan ditampilkan. Nilai : alias → kursor yang 2
all-scroll mengindikasikan alias dari sesuatu akan dibuat.
auto all-scroll → kursor yang mengindikasikan bahwa objek dapat digeser ke semua
cell arah.
context-menu auto → default. Kursor yang ditentukan oleh browser.
col-resize cell → Kursor yang mengindikasikan bahwa suatu sel (atau sekelompok sel)
copy dapat dipilih.
crosshair context-menu → kursor yang mengindikasikan bahwa menu konteks tersedia.
default col-resize → kursor yang mengindikasikan bahwa kolom dapat diperluas atau
e-resize dipersempit secara horizontal.
help copy → kursor yang mengindikasikan bahwa objek yang ditunjuk akan dikopi.
move crosshair → kursor akan ditampilkan dengan bentuk crosshair(bentuk target
n-resize yang biasanya muncul pada bidikan jarak jauh misalnya pada teropong, senjata
ne-resize rifle, dll).
nesw-resize default → kursor default (tanda panah).
ns-resize e-resize → kursor yang mengindikasikan tepi kotak dapat ditarik ke kanan
nw-resize (Timur).
nwse-resize ew-resize → mengindikasikan kursor resize dua arah.
no-drop help → kursor mengindikasikan bantuan tersedia.
none move → kursor mengindikasikan objek yang ditunjuk dapat dipindah.
not-allowed n-resize → kursor mengindikasikan tepi kotak dapat ditarik ke atas (Utara).
pointer ne-resize → kursor mengindikasikan tepi kotak dapat ditarik ke atas dan ke
pogress kanan (Utara/Timur).
row-resize nesw-resize → mengindikasikan kursor resize dua arah.
s-resize ns-resize → mengindikasikan kursor resize duar arah.
se-resize nw-resize → kursor mengindikasikan tepi kotak dapat ditarik ke atas dan ke kiri
sw-resize (Utara/Barat).
text nwse-resize → mengindikasikan kursor resize dua arah.
URL no-drop → kursor mengindikasikan objek yang diseret tidak dapat ditempatkan
vertical-text di area yang ditunjuk.
w-resize none → kursor tidak akan ditampilkan.
wait not-allowed → kursor mengindikasikan bahwa aksi yang diminta tidak dapat

mhtml:file://D:\e-Book\Perancangan Web\Bab XII CSS Display, Positioning, dan Floatin... 13/06/2017

Bab XII CSS : Display, Positioning, dan Floating Page 2 of 5

Properti Nilai Deskripsi CSS

zoom-in dijalankan.
zoom-out pointer → kursor akan berbentuk penunjuk dan mengindikasikan link.
pogress → kursor mengindikasikan program sedang sibuk (dalam proses).
row-resize → kursor mengindikasikan baris dapat di-resize secara vertikal.
s-resize → kursor mengindikasikan bahwa teti kotak dapat ditarik ke bawah
(Selatan).
se-resize → kursor mengindikasikan bahwa tepi kotak dapat ditarik ke bawah
dan ke kanan (Selatan/Timur).
sw-resize → kursor mengindikasikan bahwa tepi kotak dapat ditarik ke bawah
dan ke kiri (Selatan/Barat).
text → kursor mengindikasikan teks yang dapat diseleksi.
URL → merupakan daftar alamat gambar yang dipisahkan dengan tanda koma.

Note: Selalu tambahkan kursor default pada akhir daftar, untuk

menghindari gambar tidak dapat ditampilkan.

vertical-text → kursor mengindikasikan teks vertikal dapat diseleksi.

w-resize → kursor mengindikasikan tepi kotak dapat ditarik ke kiri (Barat).
wait → kursor mengindikasikan program sedang sibuk.
zoom-in → kursor mengindikasikan objek dapat diperbesar.
zoom-out → kursor mengindikasikan objek dapat diperkecil

display none Menentukan bagaimana suatu elemen HTML akan ditampilkan. Nilai none → 1
block elemen HTML akan disembunyikan sama sekali dan lokasi asal elemen
flex tersebut akan diisi oleh elemen lainnya, sehingga elemen terlihat seolah-seolah
inline tidak pernah berada di sana.
inline-block block → menampilkan tampilan block (seperti p , div , dan semua heading,
inline-flex dll)
inline-table flex → ini adalah tampilan baru di CSS 3, di mana tampilan ini dapat
list-item memastikan elemen tampil dengan baik dalam ukuran layar dan perangkat
table yang beragam. Tampilan ini cocok digunakan pada teknik layout web, yang
table-caption akan dibahas di bab berikutnya.
table-cell inline → memberikan tampilan inline (seperti a , span , dll)
table-column inline-block → memberikan tampilan inline pada elemen dengan elemen
table-column-group anaknya dalam tampilan block
table-footer-group inline-flex → memberikan tampilan inline pada elemen dengan elemen
table-header-group anaknya dalam tampilan flex
table-row inline-table → memberikan tampilan inline pada elemen dengan elemen
table-row-group anaknya dalam tampilan tabel
list-item → memberikan tampilan li pada elemen
table → memberikan tampilan table pada elemen
table-caption → memberikan tampilan caption pada elemen
table-cell → memberikan tampilan td pada elemen
table-column → memberikan tampilan col pada elemen
table-column-group → memberikan tampilan colgroup pada elemen
table-footer-group → memberikan tampilan tfoot pada elemen
table-header-group → memberikan tampilan thead pada elemen
table-row → memberikan tampilan tr pada elemen
table-row-group → memberikan tampilan tbody pada elemen

visibility visible Menentukan apakah suatu elemen terlihat atau tidak. Nilai: visible → default, 2
hidden elemen akan ditampilkan.
collapse hidden → elemen akan disembunyikan, akan tetapi tetap akan disediakan

mhtml:file://D:\e-Book\Perancangan Web\Bab XII CSS Display, Positioning, dan Floatin... 13/06/2017

Bab XII CSS : Display, Positioning, dan Floating Page 3 of 5

Properti Nilai Deskripsi CSS

tempat kosong untuk elemen tersebut.

collapse → elemen akan disembunyikan, tetapi tempat semula elemen
tersebut akan dihapus. Berlaku untuk baris atau kolom pada tabel

Pada dasarnya semua elemen HTML akan ditampilkan dalam aliran normal di mana elemen yang pertama kali dituliskan di
dalam body akan ditampilkan lebih dahulu, kemudian akan diikuti oleh elemen-elemen lainnya yang ditampilkan berikutnya.
Elemen-elemen dalam aliran normal tersebut tidak akan pernah menumpuk/menindih elemen lainnya.

Untuk memungkinkan elemen-elemen berlaku tidak mengikuti aliran normal atau untuk dapat menumpuk elemen-elemen,
dapat digunakan properti positioning.

Properti Nilai Deskripsi CSS

bottom auto Menentukan posisi bawah suatu elemen. Untuk elemen dengan posisi absolute, 2
angka properti ini akan mengatur tepi bawah suatu elemen terhadap tepi bawah
% elemen induknya. Untuk elemen dengan posisi relative, properti ini akan
mengatur tepi bawah suatu elemen terhadap posisi normalnya. Jika properti
position bernilai static maka properti ini tidak berlaku. Nilai: auto → default,
mengizinkan browser yang mengkalkulasikan sendiri posisi tepi bawahnya.
angka → mengatur posisi tepi bawah dalam px, cm, dll. Nilai negatif diizinkan.
% → mengatur posisi tepi bawah dalam persentase terhadap elemen induknya.
Nilai negatif diizinkan.

clip bentuk Memotong suatu elemen yang posisinya = absolute. Nilai: bentuk → memotong 2
auto elemen. Bentuk yang valid hanya rect(atas, kanan, bawah, kiri) .
Nilai yang di dalam kurung berupa angka dengan CSS unit.
auto → default, tidak akan dipotong.
Properti ini tidak akan berlaku jika properti overflow bernilai visible.

left auto Menentukan poisisi kiri suatu elemen. Untuk elemen dengan posisi absolute, 2
length properti ini akan mengatur tepi kiri suatu elemen terhadap tepi kiri elemen
% induknya. Untuk elemen dengan posisi relative, properti ini akan mengatur tepi
kiri suatu elemen terhadap posisi normalnya. Jika properti position bernilai static
maka properti ini tidak berlaku. Nilai: auto → default, mengizinkan browser
yang mengkalkulasikan sendiri posisi tepi kirinya.
angka → mengatur posisi tepi kiri dalam px, cm, dll. Nilai negatif diizinkan.
% → mengatur posisi tepi kiri dalam persentase terhadap elemen induknya.
Nilai negatif diizinkan.

position absolute Menentukan metode positioning suatu elemen. Nilai: static → default, elemen 2
fixed akan ditampilkan sesuai aliran normal. Properti top, right, bottom, dan left tidak
relative akan berlaku pada elemen dengan posisi ini.
static relative → elemen akan diposisikan relatif terhadap aliran normal. Elemen
dengan posisi ini dapat dipindahkan dan menimpa elemen lain, walaupun tetap
akan disediakan tempat kosong untuk elemen tersebut dalam aliran normal.
absolute → elemen akan diposisikan relatif terhadap elemen induk pertama
yang mempunyai posisi selain static. Jika tidak ada elemen induk yang
demikian, maka elemen akan diposisikan relatif terhadap elemen dasar yaitu
html . elemen dengan posisi ini akan dikeluarkan dari aliran normal, sehingga
elemen-elemen lain akan berlaku seolah-oleh elemen tersebut tidak ada.
Elemen dengan posisi dapat menimpa elemen-elemen lain.
fixed → elemen akan diposisikan relatif terhadap jendela browser. Sehingga
elemen akan kelihatan seperti berpindah saat discroll. Elemen dengan posisi ini

mhtml:file://D:\e-Book\Perancangan Web\Bab XII CSS Display, Positioning, dan Floatin... 13/06/2017

Bab XII CSS : Display, Positioning, dan Floating Page 4 of 5

Properti Nilai Deskripsi CSS

akan dikeluarkan dari aliran normal, sehingga elemen-elemen lain akan berlaku
seolah-oleh elemen tersebut tidak ada. Elemen dengan posisi ini dapat
menimpa elemen-elemen lain.

right auto Menentukan poisisi kanan suatu elemen. Untuk elemen dengan posisi absolute, 2
length properti ini akan mengatur tepi kanan suatu elemen terhadap tepi kanan elemen
% induknya. Untuk elemen dengan posisi relative, properti ini akan mengatur tepi
kanan suatu elemen terhadap posisi normalnya. Jika properti position bernilai
static maka properti ini tidak berlaku. Nilai: auto → default, mengizinkan
browser yang mengkalkulasikan sendiri posisi tepi kanannya.
angka → mengatur posisi tepi kanan dalam px, cm, dll. Nilai negatif diizinkan.
% → mengatur posisi tepi kanan dalam persentase terhadap elemen induknya.
Nilai negatif diizinkan.

top auto Menentukan poisisi atas suatu elemen. Untuk elemen dengan posisi absolute, 2
length properti ini akan mengatur tepi atas suatu elemen terhadap tepi atas elemen
% induknya. Untuk elemen dengan posisi relative, properti ini akan mengatur tepi
atas suatu elemen terhadap posisi normalnya. Jika properti position bernilai
static maka properti ini tidak berlaku. Nilai: auto → default, mengizinkan
browser yang mengkalkulasikan sendiri posisi tepi atasnya.
angka → mengatur posisi tepi atas dalam px, cm, dll. Nilai negatif diizinkan.
% → mengatur posisi tepi atas dalam persentase terhadap elemen induknya.
Nilai negatif diizinkan.

z-index angka Ketika suatu elemen diposisikan di luar aliran normalnya, elemen tersebut dapat 2
auto menimpa elemen lain. Properti z-index dapat digunakan untuk mengatur urutan
penumpukan elemen-elemen. Properti ini hanya berlaku untuk elemen yang
mempunyai posisi selain static. Nilai: auto → default, mengatur urutan
penumpukan sama seperti elemen induknya.
angka → elemen yang nilai z-index-nya lebih besar akan menimpa elemen
yang nilai z-index-nya lebih kecil.
Nilai boleh negatif.

Untuk membuat teks mengelilingi suatu elemen atau untuk membuat beberapa elemen block atau inline dapat ditampilkan
dalam satu baris jika total lebar elemen-elemen tersebut tidak melebihi lebar elemen induknya, dapat menggunakan float .
Berbeda dengan positioning, elemen floating tidak bisa menindih elemen lainnya, tetapi hanya dapat ditampilkan dalam baris
yang sama.

Properti Nilai Deskripsi CSS

clear left Elemen dengan properti float akan mengakibatkan elemen tersebut menyisipi 1
right elemen yang diletakkan setelah elemen tersebut. Properti ini digunakan untuk
both menentukan sisi manakah dalam suatu elemen yang tidak boleh disisipi objek
none floating. Nilai: left → tidak bisa floating sebelah kiri.
right → tidak bisa floating sebelah kanan.
both → tidak bisa floating di kedua sisi.
none → default,floating diizinkan.

float left Menentukan floating suatu elemen. Elemen dengan properti ini mengizinkan 1
right elemen tersebut menyusupi elemen-elemen yang diletakkan setelah elemen
none tersebut. Nilai: left → elemen akan ditampilkan di sebelah kiri dalam elemen
induknya.

mhtml:file://D:\e-Book\Perancangan Web\Bab XII CSS Display, Positioning, dan Floatin... 13/06/2017

Bab XII CSS : Display, Positioning, dan Floating Page 5 of 5

Properti Nilai Deskripsi CSS

right → elemen akan ditampilkan di sebelah kanan dalam elemen induknya.

none → default, elemen akan ditampilkan normal.

overflow auto Menentukan apa yang akan terjadi jika isi lebih besar dari elemen induk. Nilai: 2
hidden visible → default, isi tidak akan dipotong, tetapi dibiarkan melimpah dari
scroll elemennya.
visible hidden → isi akan dipotong, dan sisa yang melimpah akan disembunyikan.
scroll → isi akan dipotong, akan tetapi akan ditambahkan scroll-bar untuk
melihat isi yang melimpah.
auto → jika isi melimpah makan akan ditambahkan scroll-bar.

Ketika suatu elemen lebih besar dari pada elemen induknya dan elemen tersebut di-floating, maka elemen tersebut akan
keluar dari elemen induknya, sehingga perlu diberi sedikit modifikasi yang dapat dilakukan dengan menambahkan overflow ,
tetapi hal ini mungkin dapat memunculkan scroll, cara lain dapat menambahkan style berikut:

.clearfix::after {
content: "";
clear: both;
display: table;
}

By Megawati
[email protected]
Template Design: Expression Web Tutorials & Templates
Created: March 2013; Updated May 2016

mhtml:file://D:\e-Book\Perancangan Web\Bab XII CSS Display, Positioning, dan Floatin... 13/06/2017