Mengatur nilai properti ini ke absolut akan menyeret objek keluar dari pemosisian absolut alur dokumen normal, terlepas dari tata letak konten di sekitarnya. Jika objek lain dengan properti z-index yang berbeda sudah menempati posisi tertentu, mereka tidak akan saling mempengaruhi, tetapi akan tumpang tindih di posisi yang sama. Objek tidak memiliki patch luar (margin), tetapi masih memiliki patch dalam (patding) dan border (border).
Untuk mengaktifkan pemosisian absolut objek, Anda harus menentukan setidaknya satu atribut kiri, kanan, atas, bawah dan mengatur nilai atribut ini ke absolut. Jika tidak, atribut di atas akan menggunakan nilai defaultnya auto, yang akan menyebabkan objek mengikuti aturan tata letak HTML normal dan dirender segera setelah objek sebelumnya.
Atribut TRBL (ATAS, KANAN, BAWAH, KIRI) hanya valid jika atribut posisi diatur.
Anda harus mengatur posisi:absolut
Jika induk (tak terbatas) tidak mengatur atribut posisi, maka absolut saat ini diposisikan dalam kombinasi dengan atribut TRBL di sudut kiri atas browser sebagai titik asli
Jika induk (tak terhingga) menetapkan properti posisi, maka absolut saat ini diposisikan dalam kombinasi dengan properti TRBL ke sudut kiri atas induk (terbaru) sebagai titik asli.
Saat mengatur posisi: relatif
Sudut kiri atas area konten induk (terbaru) adalah titik asli yang dikombinasikan dengan atribut TRBL (atau offset relatif terhadap elemen sebelumnya dari elemen yang diposisikan di area konten induk), dan sudut kiri atas BODY adalah titik asli tanpa induk. Pemosisian relatif tidak dapat dilapisi. Saat menggunakan pemosisian relatif, elemen masih menempati ruang aslinya terlepas dari apakah itu dipindahkan atau tidak. Oleh karena itu, memindahkan elemen menyebabkannya menimpa kotak lain.
Secara umum, jika halaman web berada di tengah, mudah untuk membuat kesalahan saat menggunakan Absolute, karena halaman web selalu beradaptasi secara otomatis dengan ukuran resolusi, sedangkan Absolute akan menggunakan sudut kiri atas browser sebagai titik asli dan tidak akan mengubah posisi karena perubahan resolusi. Terkadang juga perlu mengandalkan z-index untuk mengatur hubungan antara bagian atas dan bawah wadah, semakin besar nilainya, semakin tinggi bagian atasnya, dan rentang numerik adalah bilangan asli. Tentu saja, satu hal yang perlu diperhatikan adalah bahwa hubungan induk-anak tidak dapat diatur dengan z-index, dan level anak harus berada di atas dan di bawah induk.
Mengatur nilai properti ini ke relatif mempertahankan objek dalam alur HTML normal, tetapi posisinya dapat diimbangi berdasarkan objek sebelumnya. Teks atau objek yang mengikuti locator relatif menempati ruangnya sendiri tanpa menutupi ruang alami objek yang diposisikan. Sebaliknya, teks atau objek setelah objek pemosisian absolut menempati ruang alaminya sebelum objek yang ditargetkan diseret menjauh dari alur dokumen normal. Menempatkan objek pemosisian absolut di luar area pandang akan menyebabkan bilah gulir muncul. Menempatkan objek pemosisian relatif di luar area tampilan tidak muncul dengan bilah gulir. Faktanya, masalah utama dengan pemosisian adalah mengingat arti dari setiap pemosisian. Pemosisian relatif adalah posisi awal elemen "relatif dengan" alur dokumen, sedangkan pemosisian absolut adalah elemen nenek moyang yang telah diposisikan "relatif dengan" yang terbaru.
Berikut adalah penambahannya:
Meskipun saya tahu posisi absolut (absolut) dan posisi relatif CSS, saya tidak pernah menulis efek yang relevan sendiri!
Setelah bekerja lebih dari setengah hari, itu bisa dianggap selesai! Saya juga menemukan beberapa dari dua atribut ini!
Ringkasannya adalah sebagai berikut:
Mari kita lihat struktur layer berikut terlebih dahulu
<body>
<div id=posi>
<div id=rel> Lapisan ini hanya menerapkan position:relative; Gaya </div>
<div id=abs> Lapisan ini hanya menerapkan position:absolute; Gaya </div>
<div id=sss> tidak menerapkan <div>gaya
</div>
</body>
1. Mutlak: tidak menempati kursi, relatif: memiliki tempat!
Seperti superstruktur:
Layer dengan id rel akan menempati satu baris saat ditampilkan! Lapisan ABS di belakangnya hanya akan muncul di baris berikutnya!
Ketika layer dengan id ABS ditampilkan, maka akan tumpang tindih dengan ID SSS di belakang!
2. Secara default (tidak diposisikan dalam kombinasi dengan atas, dll.), absolut (pemosisian absolut) diposisikan oleh lapisan induk
Misalnya, jika lapisan di atas dengan ID adalah ABS, jika tidak diposisikan dalam kombinasi dengan TOP, posisi tampilannya akan dengan lapisan POSI induk (POSI berada di sudut kiri bawah dokumen, dan juga akan berada di sudut kiri bawah)
3. Saat menggabungkan atribut atas, bawah, kanan, kiri, dan lainnya, absolut (pemosisian absolut) diposisikan dengan jendela sebagai pemosisian, dan relatif diimbangi dengan huniannya sendiri sebagai garis dasar! Sebagai berikut:
<body>
<div id=posi>
<div id=sss> tidak menerapkan <div>gaya
<div id=rel> Lapisan ini menerapkan position:relative; bawah: 30px; Gaya </div>
<div id=abs> Lapisan ini hanya menerapkan position:absolute; bawah: 30px; Gaya </div>
</div>
</body>
Kode di atas:
Layer dengan id rel bergerak ke atas dan tumpang tindih layer dengan id SSS
Layer dengan ID ABS akan dipindahkan ke posisi 30 piksel dari jendela dengan jendela sebagai baseline!
4. Saat menggabungkan atribut atas, bawah, kanan, kiri, dan lainnya, jika Anda ingin absolut (pemosisian absolut) menggunakan lapisan induk sebagai garis besar pemosisian, Anda dapat menerapkan atribut absolut atau relatif pada lapisan induk! Sebagai berikut:
<body>
<div id=posi style="position:relative">
<div id=rel> Lapisan ini menerapkan position:relative; bawah: 30px; Gaya </div>
<div id=abs> Lapisan ini hanya menerapkan position:absolute; bawah: 30px; Gaya </div>
</div>
</body>
Kode di atas: id adalah lapisan posi, Anda juga dapat menggunakan atribut absolut!
id adalah lapisan rel, yang tidak terpengaruh, dan diimbangi oleh placeholder sendiri sebagai baseline!
Lapisan dengan id sebagai ABS didasarkan pada tepi bawah lapisan POSI sebagai garis dasar pemosisian, jika tinggi lapisan POSI kurang dari 30px saat ini, lapisan ABS mungkin tidak dapat melihatnya!
|
Diposting pada 30/10/2014 14.39.28
|
|
|
