Analisis terperinci kedudukan tetap dalam CSS-tutorial css-php.cn

Analisis terperinci kedudukan tetap dalam CSS

WBOY

Lepaskan： 2023-12-28 10:59:31

asal

1261 orang telah melayarinya

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%;
}

Salin selepas log masuk

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%;
}

Salin selepas log masuk

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>This is a fixed element</h2>
    <p>This element will stay in its position even when scrolling.</p>
</div>

</body>
</html>

Salin selepas log masuk

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!