Mengapa Elemen Kedudukan Saya Yang Benar/Tetap Tersilap?

Misteri Elemen Mutlak/Tetap Salah Tempat: Memahami Kedudukan dan Konteks

Dalam susun atur CSS anda, memahami tingkah laku mutlak atau tetap- elemen kedudukan adalah penting. Walau bagaimanapun, anda telah menghadapi masalah dalam hal ini, dan kami di sini untuk menjelaskan sedikit sebab di sebaliknya. Mari kita selami butirannya:

Kes 1: Kotak Kelabu Di Luar Ibu Bapa Saudara

Jangkaan anda ialah meletakkan kotak kelabu di sudut kiri atas bekas , tetapi ia akhirnya diletakkan di luar. Sebabnya terletak pada sifat yang anda gunakan:

• Kotak kelabu mempunyai kedudukan: mutlak. Ini menjadikan kedudukannya bebas daripada unsur induknya.
• Walau bagaimanapun, unsur induknya, bekas, mempunyai kedudukan: relatif. Ini mewujudkan konteks kedudukan baharu untuk kotak kelabu.
• Dalam konteks kedudukan ini, bahagian atas kotak kelabu: 0 dan kiri: 0 nilai adalah relatif kepada sudut kiri atas induknya dalam kedudukan semasanya.
• Tetapi ingat, bekas itu mempunyai jidar atas 100px, seperti yang dinyatakan oleh bahagian atas: sifat 100px kotak oren. Ini mewujudkan jurang antara sudut kiri atas ibu bapa dan kedudukan visual sebenar ibu bapa, menyebabkan kotak kelabu diletakkan di luar kawasan yang boleh dilihat.

Kes 2: Kotak Kelabu Dialihkan oleh Kotak Jingga

Dalam kes kedua, apabila anda mengalihkan kotak kelabu menjadi anak kedua dalam bekas, ia kelihatan seperti beralih ke kanan, mengikut kotak oren. Ini disebabkan oleh perkara berikut:

• Kedudukan kotak oren: relatif mewujudkan konteks kedudukan baharu.
• Dalam konteks ini, bahagian atas kotak kelabu: 0 dan kiri: 0 nilai adalah berbanding sudut kiri atas kotak oren.
• Kiri kotak oren: sifat 100px menolak kotak oren ke kanan, dan akibatnya, kotak kelabu mengikuti anjakan ini, kelihatan beralih ke kanan.

Atas ialah kandungan terperinci Mengapa Elemen Kedudukan Saya Yang Benar/Tetap Tersilap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!