Cara menggunakan css untuk melumpuhkan elemen

CSS, sebagai salah satu teknologi penting dalam pembangunan bahagian hadapan, memainkan peranan penting dalam reka bentuk halaman web. Walau bagaimanapun, dalam proses pembangunan sebenar, kita sering menghadapi situasi sedemikian, iaitu, kita mahu elemen tidak bergerak semasa halaman web menatal, iaitu, untuk diperbaiki. Keperluan ini sangat biasa dalam banyak senario, seperti bar navigasi teratas tapak web, ruang pengiklanan, kotak terapung, dsb. Jadi bagaimana anda mencapai ketidakbolehgerakan elemen dalam CSS?

1 Gunakan atribut kedudukan

Untuk mencapai kebolehgerakan elemen, cara paling langsung ialah menggunakan atribut kedudukan dalam CSS. Atribut kedudukan digunakan untuk menetapkan kedudukan elemen dalam dokumen dan melaraskan kedudukan elemen melalui atribut atas, bawah, kiri dan kanan.

Anda boleh menggunakan position: fixed; untuk membetulkan elemen pada halaman. Pelaksanaan khusus adalah seperti berikut:

position: fixed;
top: 0;
left: 0;
right: 0;

Dengan kod di atas, kedudukan elemen boleh dibetulkan di bahagian atas halaman. Antaranya, atribut atas digunakan untuk menetapkan jarak elemen dari bahagian atas port pandangan, dan atribut kiri dan kanan digunakan untuk mengawal lebar elemen supaya ia meliputi keseluruhan halaman. Jika anda ingin membetulkan elemen ke bahagian bawah, cuma gantikan bahagian atas dengan bahagian bawah.

2. Gunakan atribut z-index

Dalam CSS, atribut z-index digunakan untuk mengawal hubungan hierarki elemen. Ia boleh meletakkan elemen di atas atau di bawah elemen lain.

Untuk mencapai elemen tetap, anda juga boleh menggunakan atribut indeks-z. Kaedah pelaksanaan khusus adalah seperti berikut:

position: fixed;
z-index: 1000;

Dengan kod di atas, elemen boleh diperbaiki pada halaman dan diletakkan di bahagian atas halaman. Ini memastikan elemen tersebut tidak dilindungi oleh elemen lain.

3. Gunakan JavaScript untuk mencapai

Selain daripada dua kaedah di atas, anda juga boleh menggunakan JavaScript untuk mencapai imobilisasi elemen. Kaedah pelaksanaan khusus adalah seperti berikut:

window.onscroll = function() {
  var div = document.getElementById("myDiv");
  if (window.pageYOffset > 100) {
    div.style.position = "fixed";
    div.style.top = "0";
  } else {
    div.style.position = "relative";
    div.style.top = "100px";
  }
}

Melalui kod di atas, kedudukan elemen boleh ditetapkan pada halaman, dan kedudukannya boleh dipantau dalam masa nyata semasa menatal untuk mencapai kesan tetap . Walaupun kaedah ini lebih fleksibel daripada dua kaedah pertama, ia juga memerlukan keupayaan pengaturcaraan JavaScript tertentu.

Ringkasan:

Imobilisasi CSS adalah keperluan yang sangat biasa dalam pembangunan bahagian hadapan dan digunakan secara meluas dalam pembangunan sebenar. Elemen boleh diperbaiki melalui atribut kedudukan dan indeks-z, serta pengaturcaraan JavaScript. Kaedah yang berbeza perlu dipilih mengikut keperluan khusus, dan diselaraskan dan dioptimumkan berdasarkan situasi sebenar untuk mencapai hasil yang terbaik.

Atas ialah kandungan terperinci Cara menggunakan css untuk melumpuhkan elemen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!