Penjelasan detail penggunaan atribut position dalam HTML (empat jenis)

Empat nilai atribut posisi:

1.relatif

2. mutlak

3. tetap

4.statis

Keempat atribut tersebut dijelaskan di bawah ini.

 <div id=orang tua> <div id=sub1>sub1</div> <div id=sub2>sub2</div></div>

Atribut relative relatif sederhana. Kita perlu mencari tahu dari objek mana atribut tersebut diimbangi. Jawabannya terletak pada lokasinya. Pada kode di atas, sub1 dan sub2 berada dalam hubungan saudara. Jika Anda menyetel atribut relatif sub1, misalnya, setel kode CSS berikut:

 #sub1{ posisi: relatif; bantalan: 5 piksel; atas: 5 piksel; kiri: 5 piksel;}

Dapat kita pahami bahwa jika atribut relatif tidak disetel, maka posisi sub1 harus berada pada posisi tertentu sesuai dengan alur dokumen normal. Namun bila posisi sub1 disetel ke relatif, maka akan diimbangi menurut posisinya yang seharusnya sesuai dengan nilai atas, kanan, bawah, dan kiri. Arti relatif dari relatif juga tercermin dalam hal ini.

Untuk melakukan ini, Anda hanya perlu mengingat di mana sub1 seharusnya berada jika Anda tidak menyetel relatif, dan mengimbanginya dari tempat seharusnya setelah disetel.

Pertanyaan selanjutnya, dimana posisi sub2nya? Jawabannya adalah dimana sebelumnya dan dimana sekarang. Posisinya tidak akan berubah karena sub1 menambahkan atribut position.

Apa jadinya jika posisi sub2 juga disetel relatif pada saat ini? Saat ini masih sama dengan sub1, diimbangi sesuai posisi semula.

Perhatikan bahwa offset relatif didasarkan pada sisi kiri atas margin objek.

Properti ini selalu menyesatkan. Dikatakan bahwa ketika atribut position disetel ke absolut, maka selalu diposisikan sesuai dengan jendela browser. Ini sebenarnya salah. Faktanya, ini adalah karakteristik dari properti tetap.

Jika posisi sub1 disetel ke absolut, siapa yang dijadikan objek offset? Ada dua situasi di sini:

(1) Ketika objek induk sub1 (atau kakek buyut, asalkan objek induk) induk juga menetapkan atribut posisi, dan nilai atribut posisi bersifat absolut atau relatif, yaitu bukan nilai default, kemudian sub1 mengikuti Induk ini digunakan untuk penentuan posisi.

Perhatikan bahwa meskipun objek telah ditentukan, namun ada beberapa detail yang memerlukan perhatian Anda, yaitu titik posisi induk manakah yang harus kita gunakan untuk memposisikannya? Jika induk menetapkan atribut seperti margin, border, padding, dll, maka titik pemosisian ini akan mengabaikan padding dan akan diposisikan dari awal padding (yaitu hanya dimulai dari sudut kiri atas padding), Artinya, mengabaikan padding tentu saja tidak akan mengabaikan margin dan border.

Pertanyaan selanjutnya dimana letak sub2nya? Karena ketika posisinya disetel ke absolut, itu akan menyebabkan sub1 meluap dari aliran dokumen normal, seolah-olah itu bukan milik induknya, itu melayang ke atas. Ini disebut lapisan di DreamWeaver, tetapi sebenarnya artinya sama. Saat ini sub2 akan mendapat posisi sub1, dan alur dokumennya tidak lagi berdasarkan sub1, melainkan dimulai langsung dari induknya.

(2) Jika sub1 tidak memiliki objek induk dengan atribut position, maka body akan digunakan sebagai objek positioning dan diposisikan sesuai dengan jendela browser.

Fixed merupakan suatu kemutlakan khusus, yaitu fixed selalu menggunakan body sebagai objek pemosisian dan diposisikan sesuai dengan jendela browser meskipun diseret, posisinya tidak akan berubah. Mirip dengan lampiran latar belakang: diperbaiki

Tentu saja sepertinya tidak ada dukungan di bawah Dreamweaver

Nilai default posisi. Umumnya, jika atribut posisi tidak disetel, maka akan diatur sesuai dengan alur dokumen normal.

Di atas adalah penggunaan posisi dalam HTML yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!