pernah mencoba bagaimana membuat halaman web dengan beberapa layer? jika mencoba membuat halaman web(html) dengan layer mungkin kita akan bingung, gemana caranya? kan dalam html ga adatag layer….
emang benar dalam html ga ada tag layer, jadi harus kita akali. untuk itu kita dapat menggunakan css sebagai alat untuk memanipulasi halaman agar tampak seperti beberapa layer. dalam css disediakan tag “z-index”, dengan menggunakan tag tersebut kita bisa membuat halaman seolah-olah halaman tersebut terdiri dari beberapa layer.
atur nilai “z-index” sehingga objek yang kita buat tampak didepan atau dibelakang, contoh:
<html>
<head>
<title>ngetest layer</title>
<style type=”text/css”>
.satu{
top:0;
left:0;
position:absolute;
background-color:#00CCFF;
width:50px;
height:50px;}
.dua{
top:10px;
left:10px;
position:absolute;
background-color:#99FF99;
width:50px;
height:50px;
z-index:-1;}
.tiga{
top:20px;
left:20px;
position:absolute;
background-color:#CCFF33;
width:50px;
height:50px;
z-index:-2;}
</style></head>
<body>
<div>satu</div>
<div>dua</div>
<div>tiga</div></body>
</html>
maka hasilnya akan berupa 3 buah kotak tang berurutan dari depan ke belakang.
November 4th, 2010 at 8:04 am
makasih, tapi kalo misal image.. ada gambar yang pengin dibuat absolut. letaknya disitu terus. tau ga??
November 4th, 2010 at 11:14 am
klo mau gambar letaknya tetap, pake aja koordinat trus posisinya pake absolut:
contoh:
#kotak{left:200px;top:100px;position:absolute;}
dengan begitu gambar bisa menempati koordiant x,y(200,100) secara tetap(dengan titik acuan pojok kiri atas)
February 5th, 2012 at 9:52 am
aku copy paste script di atas, hasilnya cuman “satu dua, tiga” di pojok kiri atas seperti ini :
satu
dua
tiga
kurang apa ya ?
February 8th, 2012 at 10:08 am
oh iya maap itu di tag [div]nya silakan ditambahkan atribut: [class="satu"] –> satu dan seterusnya sampe yang ke tiga, soalnya di css-nya kan pake class 1 sampe 3