Namun satu lagi kedudukan sauh

CSS Anchor Positioning: Ciri yang mengejutkan, tetapi terdapat beberapa masalah yang rumit. Walaupun bukan penukar permainan seperti Flexbox atau Grid, ia mengisi jurang dalam kedudukan CSS selama beberapa dekad. Walau bagaimanapun, ia juga mempunyai beberapa ciri unik yang membawa kepada beberapa tingkah laku yang membingungkan. Artikel ini akan meneroka masalah kedudukan utama yang telah mengganggu saya untuk masa yang lama.

asal

Saya dapati masalah ini sebulan yang lalu ketika membaca kes orang lain, terutama artikel Temani AFIF mengenai "kedudukan utama dan animasi yang didorong oleh tatal". Kami sangat mengesyorkan membaca artikel ini untuk melihat apa yang menarik perhatian saya. Dia bijak menggabungkan kedudukan sauh dan animasi yang didorong oleh tatal untuk mencipta gelangsar pelbagai yang juga mengubah warna sebagai perubahan kemajuan.

Apa yang lebih menakjubkan ialah dia menggunakan dua elemen sasaran dengan nama sauh yang sama, setiap elemen yang dilampirkan pada titik sauh yang sepadan, seperti sihir. Jika ini tidak kelihatan menarik, maka kita harus mengkaji secara ringkas bagaimana kedudukan kedudukan utama berfungsi.

CSS Anchor Positioning and Anchor-Scope Atribute

Sila rujuk kepada Panduan Posisi Anchor CSS yang lengkap untuk pemahaman yang lebih mendalam.

Posisi Anchor membawa dua konsep baru ke CSS:

Point Anchor elemen dan sasaran elemen. Anchor adalah elemen rujukan yang digunakan untuk mencari unsur -unsur lain. Elemen sasaran adalah elemen yang benar -benar diposisikan berbanding dengan satu atau lebih titik utama.

sauh dan sasaran boleh menjadi hampir semua elemen, anda boleh memikirkannya sebagai dua div yang diletakkan bersebelahan:

<code><div>anchor</div>
<div>target</div></code>

Pertama, kita perlu mendaftarkan elemen utama dalam CSS menggunakan atribut

: anchor-name

<code>.anchor {
  anchor-name: --my-anchor;
}</code>

Kemudian, gunakan atribut

pada elemen yang benar -benar diposisikan untuk melampirkannya ke titik utama dengan nama yang sama. Walau bagaimanapun, untuk menggerakkan sasaran di sekitar titik utama, kita memerlukan atribut position-anchor. position-area

<code>.target {
  position: absolute;
  position-anchor: --my-anchor;
  position-area: top right;
}</code>

Ini berfungsi dengan baik, tetapi jika kita menukar penanda untuk memasukkan lebih banyak sauh dan sasaran, keadaan menjadi rumit:

<code></code>

• Anchor 1
  Target 1
• Anchor 2
  Target 2
Anchor 3
• Target 3

Elemen sasaran tidak dilampirkan pada titik utama yang terdekat, tetapi semuanya ditumpuk pada titik utama yang didaftarkan terakhir di DOM.

Atribut

anchor-scope diperkenalkan di Chrome 131 untuk menyelesaikan masalah ini. Ia mengehadkan skop titik utama kepada subtrees supaya setiap sasaran dilampirkan dengan betul. Walau bagaimanapun, saya tidak mahu memberi perhatian kepada harta ini, kerana apa yang menarik perhatian saya pada mulanya ialah Temani tidak menggunakannya . Atas sebab tertentu, semua sasaran dilampirkan dengan betul, sekali lagi seperti sihir.

apa yang berlaku?

Sasaran

biasanya dilampirkan pada sauh terakhir di DOM, bukannya sauh terdekat, tetapi dalam contoh pertama kami, kami melihat dua sauh dengan sasaran tambahan yang sama. Semua ini tidak menggunakan atribut anchor-name. Apa yang berlaku? anchor-scope

Dua perkataan:

mengandungi blok .

Ia harus diperhatikan tentang kedudukan sauh bahawa ia bergantung kepada sebahagian besarnya bagaimana unsur -unsur mengandungi blok dibina. Ini bukan ciri yang wujud dari kedudukan sauh itu sendiri, tetapi ciri -ciri kedudukan mutlak. Unsur yang benar-benar diposisikan diposisikan relatif kepada blok pembendungannya, sementara atribut margin seperti

, top: 0px atau left: 30px hanya memindahkan unsur-unsur di sekitar sempadan blok yang mengandungi, mewujudkan apa yang dipanggil inset: 1rem blok kemasukan yang diubahsuai .

Sasaran yang dilampirkan kepada sauh tidak berbeza.

position-area Biasanya, blok yang mengandungi elemen kedudukan mutlak adalah keseluruhan viewport, tetapi boleh diubah oleh mana -mana atribut kedudukan yang bukan

unsur nenek moyang (biasanya

). Temani mengambil kesempatan daripada fakta ini untuk membuat blok baru termasuk untuk setiap gelangsar supaya mereka hanya boleh dilampirkan pada titik utama mereka yang sepadan. Jika anda melihat kod tersebut, anda boleh menemuinya pada permulaan: static relative

Jika kita menggunakan strategi ini dalam contoh sebelumnya, mereka tiba -tiba akan dilampirkan dengan betul!

<code><div>anchor</div>
<div>target</div></code>

Soalan lain

Daripada menggunakan atribut

untuk melampirkan setiap sauh ke sasaran masing -masing, kami mengambil kesempatan daripada cara mengira blok yang mengandungi unsur -unsur mutlak. Walau bagaimanapun, ada cara lain, tanpa sebarang kod tambahan yang diperlukan.

anchor-scope Saya dapati ini apabila saya bereksperimen dengan menatal animasi pemacu dan kedudukan utama pada masa yang sama dan cuba melampirkan nota kaki gelembung teks ke sisi jawatan, seperti:

Secara logik, setiap nota kaki adalah matlamat, tetapi pilihan titik utama adalah agak rumit. Pada mulanya saya fikir setiap perenggan boleh digunakan sebagai sauh, tetapi itu bermakna akan ada beberapa sauh dengan

yang sama. Hasil: Semua sasaran akan disusun pada sauh terakhir:

anchor-name Ini dapat diselesaikan dengan kaedah sebelumnya untuk membuat blok yang baru untuk setiap komen. Walau bagaimanapun, kita boleh mengambil pendekatan lain, yang saya panggil pendekatan pengurangan. Masalahnya timbul apabila terdapat beberapa sauh dengan

yang sama, jadi kami mengurangkan bilangan sauh kepada satu, menggunakan elemen yang boleh menjadi sauh biasa untuk semua sasaran.

Dalam kes ini kita mahu meletakkan setiap sasaran hanya di kedua -dua belah jawatan, jadi kita boleh menggunakan seluruh badan jawatan sebagai sauh, dan kerana setiap sasaran secara semulajadi diselaraskan pada paksi menegak, semua yang tersisa adalah untuk menggerakkannya di sepanjang paksi mendatar:

Anda boleh menyemak bagaimana jawatan asal dilakukan!

Kesimpulan

anchor-scope Mungkin harta CSS baru -baru ini dikeluarkan kepada penyemak imbas (setakat ini, hanya dalam Chrome 131), jadi kami tidak dapat mengharapkan sokongannya melebihi jangkaan. Walaupun saya suka menggunakannya pada bila -bila masa, di mana sahaja, ia akan kekal terhad kepada demo pendek untuk seketika. Ini bukan alasan untuk mengehadkan penggunaan sifat kedudukan utama yang lain, yang disokong dalam Chrome 125 dan kemudiannya (dan diharapkan pada penyemak imbas lain dalam masa terdekat), jadi saya harap isu -isu kecil ini dapat membantu anda terus menggunakan kedudukan utama tanpa sebarang kebimbangan.

Atas ialah kandungan terperinci Namun satu lagi kedudukan sauh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!