Beberapa penyelidikan tentang Positoin, mutlak dan Relatif dalam pertukaran positioning_Experience CSS

Atribut Positoin mempunyai empat nilai: statik, tetap, mutlak dan relatif Dua yang terakhir sering digunakan dalam kedudukan dalam reka letak Seperti namanya, mutlak merujuk kepada kedudukan mutlak, iaitu, menyeret objek keluar dari aliran dokumen, menggunakan. kiri, Kanan, atas, bawah dan atribut lain melakukan kedudukan mutlak, dan lata mereka ditakrifkan melalui atribut z-index. Objek kini tidak mempunyai jidar, tetapi masih mempunyai padding dan sempadan. Ralatif merujuk kepada kedudukan relatif, iaitu untuk mengimbangi kedudukan dalam aliran dokumen biasa berdasarkan atribut kiri, kanan, atas, bawah dan lain-lain.
Tetapi apakah hukum mutlak dan apakah hukum relatif? Saya tidak pernah mengkajinya dengan teliti sebelum ini, dan kadang-kadang saya agak keliru apabila melibatkan aplikasi tertentu Saya percaya ramai rakan juga akan mengalami masalah ini. Saya mengujinya secara khusus hari ini dan membuat kesimpulan berikut:

1 Apabila nilai atribut Positoin adalah Relatif
Kedudukan asal objek dikekalkan, dan objek di belakangnya dikekalkan. dalam kedudukan asalnya. Aliran dokumen masih mengekalkan kedudukan asal
Nilai Atas mewakili jarak mengimbangi ke bawah objek berbanding kedudukan asal
Nilai bahagian bawah mewakili jarak mengimbangi ke atas objek berbanding dengan kedudukan asal
Apabila kedua-duanya wujud pada masa yang sama, hanya Top berfungsi.

Nilai kiri mewakili jarak objek dianjakkan ke kanan berbanding kedudukan asal
Nilai kanan mewakili jarak objek dianjakkan ke kiri berbanding kedudukan asal 🎜> Apabila kedua-duanya wujud pada masa yang sama, hanya tinggal berfungsi.


2. Apabila nilai atribut Positoin adalah mutlak Objek diekstrak daripada aliran dokumen, dan kedudukan asal yang diduduki digantikan dengan objek seterusnya
Nilai bagi Atas mewakili objek Jarak antara sempadan atas dan bahagian atas tetingkap penyemak imbas
Nilai bahagian bawah mewakili jarak antara sempadan bawah objek dan bahagian bawah tetingkap penyemak imbas
Apabila kedua-duanya wujud pada masa yang sama masa, hanya Atas berkuat kuasa jika kedua-duanya tidak dinyatakan, bahagian atas Kedudukan akan konsisten dengan aliran dokumen asal, iaitu, kedudukan menegak akan kekal tidak berubah.

Nilai kiri mewakili jarak antara sempadan kiri objek dan sebelah kiri tetingkap penyemak imbas
Nilai kanan mewakili jarak antara sempadan kanan objek dan sebelah kanan tetingkap penyemak imbas
Apabila kedua-duanya wujud pada masa yang sama, hanya dibiarkan berfungsi ; Jika kedua-duanya tidak dinyatakan, bahagian kirinya akan selaras dengan kedudukan aliran dokumen asal, iaitu, kedudukan mendatar akan kekal tidak berubah.

Apabila nilai atribut Positoin adalah mutlak, jika terdapat objek induk peringkat pertama (sama ada objek induk atau objek datuk nenek, atau mana-mana tahap yang lebih tinggi, semuanya dilayan secara sama rata, ^_^) Nilai atribut Positoin ialah Relatif, maka Kedudukan tetingkap pelayar relatif di atas akan menjadi kedudukan objek induk relatif, yang sangat membantu untuk kedudukan yang tepat.
Untuk maklumat lanjut tentang CSS, sila rujuk manual:
/shouce/css/index.html Kesimpulan yang saya dapat setelah bekerja keras untuk masa yang lama, saya harap ia akan menjadi berguna kepada semua orang. Jika terdapat sebarang kesilapan, sila betulkan saya.