Tafsiran sifat cascading CSS: indeks-z dan kedudukan-tutorial css-php.cn

Tafsiran sifat cascading CSS: indeks-z dan kedudukan

WBOY

Lepaskan： 2023-10-20 19:19:54

asal

1339 orang telah melayarinya

CSS 层叠属性解读：z-index 和 position

Tafsiran sifat cascading CSS: indeks-z dan kedudukan

Dalam CSS, reka bentuk susun atur dan gaya adalah sangat penting. Dalam reka bentuk, selalunya perlu melapis dan meletakkan elemen. Dua sifat CSS yang penting, indeks-z dan kedudukan, boleh membantu kami mencapai keperluan ini. Artikel ini akan menyelami dua sifat ini dan memberikan contoh kod khusus.

1. Atribut indeks-z

Atribut indeks-z digunakan untuk menentukan susunan susunan elemen dalam arah menegak. Susunan susunan elemen ditentukan oleh nilai atribut z-index, dengan elemen dengan nilai yang lebih tinggi meliputi elemen dengan nilai yang lebih rendah. Nilai atribut ini boleh menjadi positif, negatif atau auto.

Berikut ialah contoh yang menunjukkan cara menggunakan atribut indeks-z:

<html>
<head>
<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
        top: 50px;
        left: 50px;
    }
    .box1 {
        z-index: 1;
    }
    .box2 {
        z-index: 2;
    }
</style>
</head>
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, dua petak merah dicipta dan kedudukannya bertindih. Nilai atribut indeks-z kotak1 ialah 1, dan nilai atribut indeks-z kotak2 ialah 2. Jadi box2 akan menutup box1 dan muncul di atas.

Perlu diambil perhatian bahawa hanya elemen yang atribut kedudukannya (kedudukan) tidak statik (iaitu relatif, mutlak, tetap, melekit) boleh dipengaruhi oleh atribut indeks-z. Ini kerana hanya elemen yang atribut kedudukannya tidak statik boleh menjana konteks berlatarkan.

2. Atribut kedudukan

Atribut kedudukan digunakan untuk menentukan jenis kedudukan elemen. Ia mempunyai empat nilai yang mungkin: statik, relatif, mutlak dan tetap.

statik:
Nilai lalai, elemen diletakkan mengikut aliran dokumen biasa, mengabaikan atribut kedudukan seperti atas, kanan, bawah dan kiri.
relatif: Elemen
diposisikan mengikut kedudukan normalnya, dan kedudukan itu diperhalusi melalui atribut seperti atas, kanan, bawah dan kiri. Kedudukan relatif tidak mengeluarkan elemen daripada aliran dokumen.
mutlak: Unsur
diposisikan secara relatif kepada nenek moyangnya yang tidak statik kedudukannya yang terdekat (atau relatif kepada blok mengandungi asal jika tiada). Letakkan elemen melalui atribut seperti atas, kanan, bawah dan kiri untuk memisahkan elemen daripada aliran dokumen.
ditetapkan: Elemen
diletakkan relatif kepada tetingkap penyemak imbas dan diletakkan melalui atribut seperti atas, kanan, bawah dan kiri. Elemen kekal dalam kedudukan tetap walaupun apabila halaman menatal. Sama seperti kedudukan mutlak, elemen ini juga akan dikeluarkan daripada aliran dokumen.

Berikut ialah contoh yang menunjukkan cara menggunakan atribut kedudukan:

<html>
<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, segi empat sama merah dicipta dan jenis kedudukannya ditetapkan kepada relatif. Gerakkan kotak 50 piksel ke bawah dan 50 piksel ke kanan berbanding kedudukan biasa menggunakan sifat atas dan kiri.

Ringkasnya, indeks-z dan kedudukan ialah atribut penting untuk mencapai pelata dan kedudukan CSS. Dengan menggunakan kedua-dua atribut ini dengan sewajarnya dan menggabungkannya dengan keperluan penetapan kedudukan dan susunan susun yang khusus, kami boleh mempunyai kawalan yang tepat ke atas elemen halaman. Semoga contoh kod yang disediakan dalam artikel ini akan membantu pembaca memahami dan menggunakan kedua-dua sifat ini dengan lebih baik.

Atas ialah kandungan terperinci Tafsiran sifat cascading CSS: indeks-z dan kedudukan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!