Bolehkah saya Membetulkan Kedudukan Elemen pada X-Axis Hanya Menggunakan CSS?

Membetulkan Kedudukan pada X-Axis Hanya dalam CSS

Apabila mereka bentuk reka letak web, selalunya wajar untuk mempunyai elemen tetap pada paksi tertentu semasa masih membenarkan menatal ke arah lain. Satu senario biasa ialah untuk membetulkan elemen pada paksi-x supaya ia kekal di tempatnya secara mendatar semasa pengguna menatal secara menegak.

Adakah Mungkin?

Ya, adalah mungkin untuk menetapkan kedudukan pada paksi-x hanya menggunakan CSS.

Cara Mencapai Ia

Untuk mencapainya, ikuti langkah berikut:

1. Tetapkan kedudukan elemen kepada 'mutlak': Ini mengalih keluar elemen daripada aliran biasa dokumen dan membolehkan anda meletakkannya dengan tepat.
2. Gunakan 'kiri' property: Tentukan tepi kiri elemen berbanding dengan nenek moyang kedudukan terdekat.
3. Gunakan jQuery: Manfaatkan jQuery untuk bertindak balas pada acara tatal dan laraskan kedudukan elemen dengan sewajarnya.

jQuery dan CSS Contoh:

$(window).scroll(function() {
    $('#header').css({
        'left': $(this).scrollLeft() + 15 // Adjust based on CSS 'left'
    });
});

#header {
    top: 15px;
    left: 15px;
    position: absolute;
}

Skrip Terperinci:

Untuk menyokong perubahan CSS dinamik, anda boleh menggunakan skrip yang dikemas kini ini:

var leftOffset = parseInt($('#header').css('left')); // Grab initial left position
$(window).scroll(function() {
    $('#header').css({
        'left': $(this).scrollLeft() + leftOffset // Use initial offset
    });
});

Dengan mengikut langkah ini, anda boleh membetulkan kedudukan elemen pada paksi-x dengan berkesan sambil masih membenarkan menegak menatal.

Atas ialah kandungan terperinci Bolehkah saya Membetulkan Kedudukan Elemen pada X-Axis Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!