Bagaimana untuk mengelakkan kedudukan tetap daripada bertindih

Anda boleh mengelakkan masalah bertindih kedudukan:elemen tetap dengan menggunakan atribut indeks-z, melaraskan atribut atas, kanan, bawah dan kiri, menetapkan atribut margin dan menggunakan susun atur Grid CSS atau Flexbox. Pengenalan terperinci: 1. Gunakan atribut z-index untuk mengawal susunan susunan elemen 2. Gunakan atribut atas, kanan, bawah dan kiri untuk meletakkannya dalam kedudukan yang berbeza untuk mengelakkan pertindihan, dsb.

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

position:fixed ialah kaedah penentududukan yang biasa digunakan dalam CSS, yang membenarkan elemen mempunyai kedudukan tetap berbanding tetingkap penyemak imbas dan tidak bergerak semasa halaman menatal. Walau bagaimanapun, apabila berbilang kedudukan: elemen tetap wujud pada masa yang sama, pertindihan mungkin berlaku. Artikel ini akan memperkenalkan beberapa kaedah untuk mengelakkan pertindihan kedudukan: elemen tetap.

1. Gunakan atribut z-index: Atribut z-index boleh mengawal susunan susunan elemen. Dengan menetapkan nilai indeks-z yang berbeza untuk position:elemen tetap, anda boleh memastikan bahawa ia tidak bertindih. Nilai indeks z yang lebih besar menyebabkan elemen muncul di atas nilai indeks z yang lebih kecil. Contohnya:

.fixed-element1 {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.fixed-element2 {
position: fixed;
top: 0;
left: 0;
z-index: 2;
}

Dalam contoh ini, .fixed-element2 akan dipaparkan di atas .fixed-element1, mengelakkan pertindihan.

2. Gunakan atribut atas, kanan, bawah dan kiri: Dengan melaraskan atribut atas, kanan, bawah dan kiri bagi elemen position:fixed, anda boleh meletakkannya di lokasi yang berbeza untuk mengelakkan pertindihan. Contohnya:

.fixed-element1 {
position: fixed;
top: 0;
left: 0;
}
.fixed-element2 {
position: fixed;
top: 50px;
left: 50px;
}

Dalam contoh ini, .fixed-element2 diimbangi 50 piksel ke bawah dan ke kanan berbanding .fixed-element1 untuk mengelakkan pertindihan.

3 Gunakan atribut margin: Dengan menetapkan atribut margin untuk elemen position:fixed, anda boleh melaraskan jarak antara elemen tersebut untuk mengelakkan pertindihan. Contohnya:

.fixed-element1 {
position: fixed;
top: 0;
left: 0;
margin-right: 10px;
}
.fixed-element2 {
position: fixed;
top: 0;
left: 0;
margin-left: 10px;
}

Dalam contoh ini, .fixed-element2 diimbangi 10 piksel ke kanan berbanding .fixed-element1 untuk mengelakkan pertindihan.

4 Gunakan Grid CSS atau reka letak Flexbox: CSS Grid dan Flexbox ialah dua kaedah susun atur berkuasa yang boleh mengawal kedudukan dan jarak elemen dengan mudah. Dengan menggunakan kaedah reka letak ini, anda boleh mengelakkan pertindihan position:elemen tetap dengan lebih fleksibel. Contohnya:

.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
.fixed-element1 {
position: fixed;
top: 0;
left: 0;
}
.fixed-element2 {
position: fixed;
top: 0;
left: 0;
}

Dalam contoh ini, .fixed-element1 dan .fixed-element2 diletakkan dalam bekas grid dengan dua lajur dan terdapat 10 piksel ruang di antara mereka untuk mengelakkan pertindihan.

Untuk meringkaskan, dengan menggunakan atribut z-index, melaraskan atribut atas, kanan, bawah dan kiri, menetapkan atribut margin dan menggunakan CSS Dengan susun atur Grid atau Flexbox, kami boleh mengelakkan masalah bertindih kedudukan: elemen tetap. Memilih kaedah yang sesuai bergantung pada keperluan susun atur khusus anda dan matlamat reka bentuk.

Atas ialah kandungan terperinci Bagaimana untuk mengelakkan kedudukan tetap daripada bertindih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!