Analisis terperinci kedudukan tetap dalam CSS
Penjelasan terperinci tentang atribut kedudukan kedudukan tetap dalam CSS
Dalam CSS, kedudukan tetap (kedudukan tetap) ialah kaedah penentududukan yang biasa digunakan, yang membolehkan elemen diletakkan secara relatif kepada kedudukan tertentu tetingkap penyemak imbas tanpa menatal dengan halaman Dan tukar kedudukan. Artikel ini memperincikan sifat kedudukan kedudukan tetap dan menyediakan contoh kod khusus.
Terdapat dua atribut positioning untuk fixed positioning iaitu atas dan kiri. Ia digunakan untuk menentukan kedudukan elemen berbanding sudut kiri atas tetingkap penyemak imbas.
- Atribut atas: digunakan untuk menentukan kedudukan elemen berbanding tepi atas tetingkap penyemak imbas Anda boleh menggunakan nilai piksel, nilai peratusan atau nilai em. Berikut ialah contoh kod:
#fixed-element {
position: fixed;
top: 20px;
left: 50%;
}Dalam kod di atas, elemen dengan id "elemen tetap" ditetapkan kepada kedudukan tetap dan berada 20 piksel dari tepi atas tetingkap penyemak imbas, berpusat secara mendatar.
- atribut kiri: digunakan untuk menentukan kedudukan elemen berbanding tepi kiri tetingkap penyemak imbas Anda juga boleh menggunakan nilai piksel, nilai peratusan atau nilai em. Berikut ialah contoh kod:
#fixed-element {
position: fixed;
top: 20px;
left: 50%;
}Dalam kod di atas, atribut kiri elemen ditetapkan kepada 50%, yang bermaksud bahawa kedudukan elemen berbanding tepi kiri tetingkap penyemak imbas ialah separuh lebar daripada tetingkap pelayar.
Perlu diambil perhatian bahawa jika atribut lebar (lebar) dan tinggi (tinggi) bagi elemen kedudukan tetap tidak ditetapkan, lebarnya akan lalai kepada auto dan ketinggian juga akan dikira secara automatik.
Selain atribut atas dan kiri, kedudukan tetap juga boleh diletakkan menggunakan atribut kanan dan bawah. Ia digunakan dengan cara yang sama seperti atas dan kiri, hanya tepi rujukan yang berbeza. Atribut kanan digunakan untuk menentukan kedudukan elemen berbanding tepi kanan tetingkap penyemak imbas, manakala atribut bawah digunakan untuk menentukan kedudukan elemen berbanding tepi bawah tetingkap penyemak imbas.
Berikut ialah kod contoh kedudukan tetap yang lengkap:
<!DOCTYPE html>
<html>
<head>
<style>
#fixed-element {
position: fixed;
top: 20px;
left: 50%;
background-color: #f1f1f1;
padding: 20px;
}
</style>
</head>
<body>
<p>Scroll down to see the effect of fixed positioning.</p>
<div id="fixed-element">
<h2 id="This-is-a-fixed-element">This is a fixed element</h2>
<p>This element will stay in its position even when scrolling.</p>
</div>
</body>
</html>Dalam kod di atas, elemen div selepas elemen p ditetapkan kepada kedudukan tetap dan jarak dari tepi atas tetingkap penyemak imbas ialah 20 piksel, berpusat secara mendatar. Warna latar belakangnya ialah #f1f1f1 dan paddingnya ialah 20 piksel.
Dengan mempelajari sifat kedudukan kedudukan tetap ini, anda boleh meletakkan dan elemen susun atur dengan lebih fleksibel semasa mereka bentuk halaman web supaya ia mengekalkan kedudukan tetap apabila halaman menatal. Pada masa yang sama, anda juga boleh menggabungkan sifat dan teknik CSS lain untuk mencapai lebih banyak kesan kedudukan.
Saya harap artikel ini membantu anda dan anda boleh menggunakan pengetahuan tentang kedudukan tetap secara fleksibel dalam reka bentuk halaman masa hadapan.
Atas ialah kandungan terperinci Analisis terperinci kedudukan tetap dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Bekerja dengan Caching Graphql
Mar 19, 2025 am 09:36 AM
Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
Membuat Bragdoc anda sendiri dengan sebelas
Mar 18, 2025 am 11:23 AM
Tidak kira tahap tahap anda sebagai pemaju, tugas yang kami selesaikan -sama ada besar atau kecil -membuat kesan besar dalam pertumbuhan peribadi dan profesional kami.
Vue 3
Apr 02, 2025 pm 06:32 PM
Ia ' s! Tahniah kepada pasukan Vue untuk menyelesaikannya, saya tahu ia adalah usaha besar dan lama datang. Semua dokumen baru juga.
Bolehkah anda mendapatkan nilai harta CSS yang sah dari penyemak imbas?
Apr 02, 2025 pm 06:17 PM
Saya mempunyai seseorang yang menulis dengan soalan yang sangat legit ini. Lea hanya blog tentang bagaimana anda boleh mendapatkan sifat CSS yang sah dari penyemak imbas. That ' s seperti ini.
Kad yang disusun dengan kedudukan melekit dan sasaran sass
Apr 03, 2025 am 10:30 AM
Pada hari yang lain, saya melihat sedikit ini sangat indah dari laman web Corey Ginnivan di mana koleksi kad timbunan di atas satu sama lain semasa anda menatal.
Mari kita gunakan (x, x, x, x) untuk bercakap mengenai kekhususan
Mar 24, 2025 am 10:37 AM
Saya hanya berbual dengan Eric Meyer pada hari yang lain dan saya teringat cerita Eric Meyer dari tahun -tahun pembentukan saya. Saya menulis catatan blog mengenai kekhususan CSS, dan
