Cara menggunakan melekit dalam kedudukan

DDD
Lepaskan: 2023-10-12 15:43:23
asal
1710 orang telah melayarinya

Langkah untuk menggunakan sticky in position: 1. Tambahkan atribut "position: sticky" pada elemen; atribut bawah atau kiri untuk menetapkan nilai offset.

Cara menggunakan melekit dalam kedudukan

Sistem pengendalian tutorial ini: sistem Windows 10, komputer Dell G3.

kedudukan: sticky ialah sifat kedudukan dalam CSS yang membenarkan elemen kekal dalam kedudukan tertentu semasa menatal. Apabila elemen ditatal ke ofset yang ditentukan, ia "berkedudukan melekit" dan kekal pada kedudukan itu sehingga ia ditatal ke ofset lain yang ditentukan.

Untuk menggunakan kedudukan: melekit, langkah berikut diperlukan:

1. Tambahkan kedudukan: atribut melekit pada elemen.

2 Untuk meletakkan elemen yang ditentukan berbanding dengan elemen nenek moyangnya yang terdekat dengan kotak tatal, anda boleh menggunakan atribut atas, kanan, bawah atau kiri untuk menetapkan nilai offset.

Sebagai contoh, berikut ialah contoh menggunakan kedudukan: sticky:

.container { height: 400px; overflow: auto; } .sticky-element { position: sticky; top: 20px; background-color: #f1f1f1; padding: 10px; }
Salin selepas log masuk
这是一个粘性元素
Salin selepas log masuk

Dalam contoh di atas, elemen .sticky-element akan kekal dalam kedudukan itu apabila ditatal ke jarak 20px dari bahagian atas elemen .container.

Sila ambil perhatian bahawa kedudukan: atribut melekat mungkin tidak disokong dalam beberapa versi pelayar lama, jadi ujian keserasian diperlukan apabila menggunakannya.

Atas ialah kandungan terperinci Cara menggunakan melekit dalam kedudukan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!