Masalah terbesar saat menggunakan lapisan di halaman tengah adalah posisi lapisan. Ketika resolusi tampilan diubah, posisi lapisan relatif terhadap elemen tengah lainnya akan berubah. Artikel ini memperkenalkan cara untuk menjaga agar lapisan tidak sejajar dengan elemen tengah lainnya.
Penentuan posisi absolut dan posisi relatif
lapisan Kode posisi absolut untuk lapisan:
<div id="Layer1" style="position:absolute; left:45px; top:25px; width:400px; height:155px; z-index:1"> </div>
Kode posisi relatif lapisan:
<div id="Layer1" style="position: relative; left:45px; top:25px; width:400px; height:155px; z-index:1"></div>
Di halaman tengah, masukkan kode lapisan posisi relatif, dan posisi lapisan akan berada di tengah halaman. Tapi itu menjadi tidak bisa digerakkan dan tidak nyaman untuk digunakan.
Masukkan kode posisi absolut. Jika kiri dan atas berisi nilai positif dan negatif, lapisan tidak boleh berada di tengah. Ketika atribut kiri dan atas dihapus, lapisan dapat dipusatkan dan tidak ada ketidaksejajaran dibandingkan elemen tengah lainnya pada halaman.
Perbedaan antara lapisan gambar dan lapisan penyisipan
. Menggunakan lapisan gambar:
Di halaman tengah, gunakan kode yang merender layer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=gb2312">
<judul>div</judul>
</kepala>
<tubuh>
<div id="Layer1" style="position:absolute; kiri:40px; atas:30px; lebar:265px; tinggi:75px; z-index:1"></div>
<div align="pusat"></div>
</tubuh>
</html>
Gunakan lapisan sisipan:
Pada halaman tengah, gunakan kode insert layer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=gb2312">
<judul>div2</judul>
</kepala>
<tubuh>
<div align="tengah">
<div id="Layer1" style="position:absolute; lebar:200px; tinggi:115px; z-index:1"></div>
</div>
</tubuh>
</html>
Karena kode yang dihasilkan menggunakan "lapisan gambar" tidak termasuk dalam kode pemusatan, untuk memastikan bahwa lapisan tersebut tidak sejajar dengan elemen lain di halaman tengah, lapisan penyisipan harus digunakan.
Pada halaman terpusat, dua metode biasanya digunakan untuk memastikan bahwa tidak ada ketidakselarasan lapisan relatif terhadap elemen tengah lainnya.
Menggunakan lapisan penyisipan
1. Di halaman tengah, letakkan titik penyisipan di dokumen. Dalam contoh, tempatkan titik penyisipan di tabel.
2. Pilih menu "Sisipkan"/"Lapisan".
3.Sebuah lapisan dimasukkan ke dalam dokumen. Dalam contoh, sebuah layer dimasukkan ke dalam tabel. Saat diuji di browser IE dan resolusi diubah, konten lapisan tidak akan selaras dibandingkan dengan elemen tengah lainnya.
Periksa properti lapisan ini di panel properti. Lapisan yang disisipkan ini menghapus nilai "kiri" dan "atas".
Cara ini sering digunakan untuk membuat menu pop-up.
Menggunakan Lapisan Bersarang
Lapisan bersarang adalah lapisan yang kodenya terdapat di dalam lapisan lain.
Sebelum menggunakan lapisan bersarang, Anda harus mengatur terlebih dahulu beberapa parameter untuk lapisan tersebut. Pilih menu "Edit"/"Preferensi", dan di kotak dialog "Preferensi", pilih "Kompatibilitas Netscape 4: Ukuran tetap saat menyisipkan lapisan" sehingga lapisan bersarang yang dibuat dapat kompatibel dengan browser Netscape 4. Dan centang "Bersarang: Gunakan bersarang jika di lapisan".
Buka panel Lapisan dan hapus centang "Cegah Tumpang Tindih".
Lapisan bertumpuk:
Sisipkan tabel pada halaman tengah, dan sisipkan lapisan pada tabel. Lapisan ini tidak akan sejajar dengan tabel. Pada lapisan ini, gunakan perintah "Sisipkan"/"Lapisan" untuk menyisipkan sublapisan (lapisan bertumpuk). Tidak peduli bagaimana Anda memindahkan sublapisan ini pada halaman, posisinya tidak akan tergeser relatif terhadap elemen tengah lainnya.
Dalam lapisan yang disisipkan, Anda dapat menyisipkan beberapa lapisan bertumpuk, lalu memindahkan lapisan bertumpuk tersebut ke tempat yang diperlukan, sehingga Anda dapat menggunakan lapisan tersebut sesuka Anda di halaman tengah.
Kesimpulan: Pusatkan halaman, buat menu pop-up, gunakan perintah Sisipkan/Layer; gunakan tata letak lapisan dan letakkan konten dalam lapisan, gunakan lapisan bersarang.