DHTML CSS Positioning (CSS-P)

CSS digunakan untuk menambahkan gaya ke elemen HTML.

Contoh

catatan:Sebagian besar contoh DHTML memerlukan IE 4.0+, Netscape 7+, atau Opera 7+!

position:relative
Bagaimana cara menempatkan elemen ini relatif terhadap posisi normalnya.
position:relative
Bagaimana cara menempatkan semua judul relatif terhadap posisi normalnya.
position:absolute
Bagaimana cara menggunakan nilai absolut untuk menentukan posisi elemen.

Anda dapat menemukan lebih banyak contoh di bawah halaman.

Berapa properti yang dapat digunakan bersamaan dengan CSS-P?

Pertama, elemen ini harus menentukan atribut position (relative atau absolute).

Lalu, saya dapat menetapkan berbagai properti CSS-P berikut:

  • left - Lokasi kiri elemen
  • top - Lokasi puncak elemen
  • visibility - Tentukan apakah elemen harus terlihat atau tersembunyi
  • z-index - Urutan penyangga elemen
  • clip - Potong elemen
  • overflow - Bagaimana menangani konten yang melampaui

Position

Atribut position dalam CSS memungkinkan Anda mengendalikan lokasi elemen dalam dokumen.

position:relative

Atribut position:relative dapat menempatkan elemen berdasarkan posisi saat ini elemen itu sendiri.

Contoh di bawah ini menempatkan elemen div ini di posisi 10 pixel kanan dari posisi normalnya:

div
{
position:relative;
left:10;
}

position:absolute

Atribut position:absolute menempatkan elemen berdasarkan margin jarak ke jendela.

Contoh di bawah ini menempatkan elemen div ini di posisi 10 pixel kanan dari margin kiri blok yang menampungnya:

div
{
position:absolute;
left:10;
}

Visibility

Atribut visibility menentukan apakah elemen dapat terlihat atau tak.

visibility:visible

Atribut visibility:visible membuat elemen terlihat.

h1
{
visibility:visible;
}

visibility:hidden

Atribut visibility:hidden membuat elemen tak terlihat.

h1
{
visibility:hidden;
}

Z-index

Atribut z-index digunakan untuk menempatkan elemen satu setelah elemen lain. Nilai default z-index adalah 0. Nilai yang lebih tinggi artinya prioritas yang lebih tinggi. z-index: -1 adalah prioritas yang lebih rendah.

h1
{
z-index:1;
}
h2
{
z-index:2;
}

Dalam contoh di atas, jika h1 dan h2 bertumpuk, elemen h2 akan berada di atas h1.

Filter

Atribut filter memungkinkan Anda menambah efek gaya tambahan kepada teks dan gambar.

h1
{
lebar:100%;
filter:glow;
}

catatan:Untuk menggunakan properti filter, selalu tentukan lebar elemen.

contoh di atas akan menghasilkan output di bawah ini:

Header

berbagai filter

catatan:kecuali properti background-color diatur menjadi transparent, beberapa properti Filter akan gagal berfungsi!

properti parameter deskripsi contoh
alpha
  • kecerahan
  • finishopacity
  • gaya
  • startx
  • starty
  • finishx
  • finishy
memungkinkan Anda mengatur kecerahan elemen
filter:alpha(
kecerahan=20,
finishopacity=100,
gaya=1,
startx=0, 
starty=0,
finishx=140,
finishy=270)
blur
  • add
  • arah
  • kekuatan
akan membuat elemen menjadi blur
filter:blur(
add=true,
arah=90,
kekuatan=6);
chroma warna akan membuat warna yang ditentukan jadi transparan
filter:chroma(
warna=#ff0000)
fliph none membalikkan elemen secara horizontal filter:fliph;
flipv none membalikkan elemen secara vertikal filter:flipv;
glow
  • warna
  • kekuatan
akan membuat elemen bercahaya
filter:glow(
warna=#ff0000,
kekuatan=5);
gray none tampilkan elemen dengan hitam dan putih filter:gray;
invert none tampilkan elemen dengan warna dan kecerahan yang diubah balik filter:invert;
mask warna tampilkan elemen dengan latar belakang warna yang ditentukan dan latar depan yang transparan
filter:mask(
warna=#ff0000);
bayangan
  • warna
  • arah
tampilkan elemen dengan bayangan
filter:shadow
(warna=#ff0000,
arah=90);
dropshadow
  • warna
  • offx
  • offy
  • positif
tampilkan elemen dengan bayangan
filter:dropshadow
(warna=#ff0000,
offx=5,
offy=5,
positif=true);
gelombang
  • add
  • freq
  • kekuatan_cahaya
  • fase
  • kekuatan
tampilkan elemen dalam bentuk gelombang
filter:wave(
add=true,
freq=1,
lightstrength=3,
phase=0,
strength=5)
xray none Tampilkan elemen dengan warna dan nilai kecerahan yang dipecahkan dengan warna hitam dan putih. filter:xray;

Latar Belakang

Properti background memungkinkan Anda memilih latar belakang pribadi.

background-attachment:scroll

Latar belakang akan menggulir saat halaman menggulir.

background-attachment:fixed

Latar belakang tidak akan menggulir saat halaman menggulir.

Beberapa Contoh Lain

Visibility
Bagaimana menjadikan elemen tak terlihat. Apa Anda ingin elemen ini ditampilkan atau tidak?
Z-index
Z-index dapat digunakan untuk menempatkan elemen di belakang elemen lain, melalui urutan Z-index.
Z-index
Lihat, urutan Z-index elemen sudah berubah.
Kursor
Ganti gaya penanda mouse dengan CSS.
Filter
Gunakan properti filter untuk mengubah gaya judul.
Filter pada Gambar
Properti filter juga dapat diterapkan pada gambar, di sini ada beberapa contoh gambar yang sudah diterapkan properti filter.
Watermark
Gambar latar belakang yang tidak bergerak saat halaman menggulir.