Kedudukan relatif - apakah ia? penerangan terperinci

HTML bersarang - satu proses yang panjang, ketat, tetapi sangat kreatif. Walaupun bagi kebanyakan orang yang bekerja di IT, susun atur laman web mungkin kelihatan rutin membosankan, pakar-pakar yang mempunyai kerjaya untuk kes seperti itu, bukan sahaja kualitatif menjalankan tugas itu, tetapi juga menerima daripada proses pembaharuan yang ketara.

Walau bagaimanapun, sebelum anda menjadi alat sandi yang berpengalaman, setiap pendatang baru menghabiskan banyak masa mengkaji pelbagai arahan dan spesifikasi kedua-dua bahasa HTML, dan sekutunya - CSS. Mengenai tepat apa CSS, apa yang ada dan apa yang "telinga kepura-puraan" membolehkan anda untuk bangun, dan juga sebagai salah satu daripada sifat-sifat utamanya - Jawatan Relative - hari ini kita akan bercakap.

Apa yang CSS?

CSS Singkatan boleh disalin dan diterjemahkan ke dalam Bahasa Rusia sebagai "lembaran gaya melata". Ia kedengaran agak pelik - dalam satu tangan, ia seolah-olah jelas, dan kata-kata, dan di pihak yang lain - pengertian umum tidak segera ditangkap. Mari kita mulakan dengan mudah - dengan gaya. Teknologi ini membolehkan anda untuk melampirkan objek pada halaman, ciri-ciri tertentu mengenai gambaran bahawa anda hanya boleh mendaftar sekali sahaja dan menggunakan nombor terhingga kali.

Perkataan "jadual" dalam terjemahan rasmi muncul hampir oleh kemalangan - sebenarnya lebih sesuai di sini adalah dengan menggunakan perkataan "senarai" atau "senarai", bagaimanapun pengarang terjemahan asal memutuskan bahawa CSS kelihatan seperti lebih daripada senarai, dan siapa kita itu kini cuba mereka.

Akhir sekali, perkataan "Cascade." Hakikatnya adalah bahawa setiap elemen boleh mempunyai beberapa gaya yang boleh dicampur atau bertindih. Dalam kes sedemikian, pelayar mempunyai untuk menggunakan satu set peraturan, untuk mengarang kemunculan blok, yang ternyata menjadi beberapa gaya, dengan salah seorang daripada mereka, sebagai contoh, mempunyai harta relatif Jawatan, dan lain - Kedudukan Mutlak. Malah, konflik itu tidak boleh diterima, tetapi dalam projek-projek besar kekeliruan itu berlaku agak kerap.

Maka sekarang, apabila semuanya jelas dari nama, mari kita lihat contoh yang mudah. Katakan laman anda harus menjadi sejumlah besar butang, yang direka dalam cara yang tertentu. Mereka mempunyai ciri-ciri seperti saiz, bayang-bayang, kelegapan, warna. Sudah tentu, anda boleh menentukan parameter ini, mewujudkan setiap butang, tetapi adalah lebih mudah untuk menggunakan CSS. Dalam amalan, anda perlu untuk menggambarkan kelas tertentu, yang menyenaraikan nilai semua sifat-sifat di atas, dan kemudian, bukannya senarai yang panjang, tag setiap butang hanya akan perlu untuk menentukan nama kelas, kemudian pelayar itu sendiri akan warna elemen-elemen ini dalam warna yang dikehendaki dan memberikan mereka yang sepatutnya "gloss".

Apakah harta Posisi?

Kita kini terus ke Jawatan hartanah, demi yang telah dimulakan artikel ini keseluruhan. Jika anda sudah biasa dengan bahasa Inggeris, atau mempunyai gerak hati yang baik, maka anda sudah perlu jelas - hartanah ini bertanggungjawab untuk lokasi item. Malah, cara ia adalah, tetapi sebaliknya menentukan lokasi tertentu, hotel ini memberitahu pelayar bagaimana ia perlu diletakkan satu atau elemen lain berkenaan dengan bersebelahan atau seluruh halaman secara keseluruhan.

Apakah nilai-nilai boleh harta Posisi?

harta kita boleh menerima beberapa nilai-nilai yang berbeza, terdapat hanya lima. Berikut adalah penerangan ringkas mengenai setiap satu:

• Kedudukan Inherit. Ciri ini membolehkan anda untuk menyalin data pada kedudukan unsur yang ada ibu bapa. Sebagai contoh, jika anda mempunyai div yang mempunyai Kedudukan relatif ditentukan, kemudian masuk ke dalamnya dengan IMG nilai mewarisi juga akan ditetapkan untuk relatif.
• Kedudukan statik. Nilai ini diberikan kepada semua elemen secara automatik, kecuali dinyatakan lagi. Unsur-unsur dimuatkan ke dalam kedudukan seperti yang dinyatakan dalam kod dan tidak boleh didapati dengan pelbagai "frills", yang membolehkan untuk mengubah kedudukan mereka.
• Kedudukan Mutlak. Dengan nilai ini harta Jawatan ini agak sering digunakan dalam kes-kes di mana ia adalah perlu untuk mewujudkan "terapung" elemen. Dengan nilai yang diberikan item harta itu "tidak kelihatan" untuk komponen lain halaman. Iaitu, mereka disusun seolah-olah unsur mutlak kami tidak wujud. Dia sendiri akan sentiasa berada di tempat, tidak kira sejauh mana telah halaman menatal.
• Jawatan Tetap. Dalam banyak cara, nilai ini adalah sama dengan yang sebelumnya, bagaimanapun, manakala elemen mutlak adalah terikat kepada ibu bapa, tetap kegunaan hanya koordinat sudut kiri atas skrin pelayar, mengabaikan yang lain daripada unsur-unsur yang mendahuluinya.
• Akhir sekali, kedudukan relatif. Ini nilai jenis membolehkan kedudukan elemen berbanding dengan yang lain, yang boleh berguna untuk mewujudkan penyesuaian yang penandaan dipanggil bersama-sama "getah". Dengan harta ini, barang yang akan "menolak" yang lain, tanpa kehilangan keupayaan untuk mengubah kedudukan mereka pada halaman.

Bekerja dengan Jawatan dalam pelayar yang berbeza

Tidak semua pelayar sama-sama serasi. Walaupun kebanyakan program alternatif untuk melayari Internet tanpa sebarang masalah nilai Jawatan dilihat sememangnya benar, "kronik khas» Internet Explorer menganggap harta itu, bergantung kepada versi.

Sebagai contoh, menggunakan sudah "dikebumikan" pelayar yang IE6, anda tidak boleh menggunakan nilai tetap dan Inherit - "keldai" mereka hanya mengabaikan ia. Walau bagaimanapun, walaupun pada hakikatnya versi ketujuh keadaan mula bertambah baik, dan tetap sudah diproses, untuk Mewarisi tercinta "untuk memuat turun pelayar yang lain pelayar," dicapai hanya dalam penjelmaan kelapan.

Sepanjang pemerhati tenang mengendalikan Position dengan versi yang pertama, dengan pengecualian Opera, yang telah mendapat sokongan daripada hotel di 4 variasinya, yang diterbitkan pada pertengahan 90-an.

Bekerja dengan Jawatan dalam Javascript

Malah, kisah bagaimana untuk bekerja dengan harta Jawatan dalam Javascript, kami telah memasukkan hanya demi kesopanan. Kerana harta ini tidak mempunyai sebarang aksara khas dalam tajuk, anda boleh menggunakan JS tanpa apa-apa perubahan, sebagai contoh, untuk menetapkan Jawatan div yang relatif, perlu memasukkan baris seperti ini: div.style.position = 'saudara'.

Seperti yang anda lihat, ia cukup mudah.

Mengapa Jawatan merit relatif perhatian khusus?

Walaupun kebanyakan dari Jawatan nilai hartanah, untuk meletakkan ia sedikit, "spat" pada unsur-unsur sekitar, dengan menggunakan nilai "kedudukan gaya: saudara", perlu sentiasa ingat tentang laman keseluruhan secara keseluruhan, kerana penggunaan yang tidak betul boleh kuat "condong" seluruh kandungan skrin .

Selain itu, hotel ini hanya membolehkan anda untuk dengan mudah menukar reka bentuk penyesuaian tetap, kerana permohonan secara automatik akan memberi kesan kepada semua halaman kandungan. Maka kita masih mempunyai masa untuk mempertimbangkan contoh dan kesilapan menggunakan nilai ini, dan anda akan melihat kepentingan ketara dalam amalan.

Apabila anda perlu menggunakan kedudukan relatif?

Selain susun atur konvensional halaman HTML, Kedudukan relatif sering digunakan untuk mencipta pelbagai kesan yang menarik. Sebagai contoh, jika anda ingin item "datang" di halaman atau, sebaliknya, secara beransur-ansur pergi di luar wilayahnya, ia adalah tepat hartanah ini boleh membantu anda melaksanakan ini "helah".

Ini "helah" dilaksanakan melalui Javascript, atau, jika anda bertujuan untuk pengenaan progresif, melalui sifat-sifat CSS3, yang membolehkan anda untuk menyesuaikan perubahan kitaran dalam nilai pembolehubah tertentu.

Di samping itu, dalam beberapa kes mungkin untuk mewujudkan "hibrid" nilai-nilai Kedudukan relatif. CSS, walaupun tidak pada masa yang sama membolehkan anda untuk menetapkan sesuatu seperti kedudukan: relatif mutlak, tetapi dengan menggunakan beberapa helah, ia masih mungkin untuk mencapai kesan ini. pendekatan ini mungkin berguna dalam kes-kes di mana anda perlu membuat kompleks sesuatu seperti petua alat atau menu pop-up. Memandangkan contoh, kami akan memberikan penerangan mengenai struktur seperti "hibrid."

Contoh menggunakan kedudukan relatif

Kedudukan relatif - ia adalah agak mudah, tetapi alat yang fleksibel yang membolehkan anda untuk melaksanakan pelbagai kesan yang menarik. Agar tidak membuang masa dan tempat untuk menulis template kod tidak berguna, kami membentangkan beberapa algoritma lisan, yang boleh menghiasi laman web anda atau halaman tertentu.

Mari kita mulakan dengan "kehabisan" talian. Katakan anda mempunyai keperluan untuk elemen yang akan "perjalanan" kerana sisi kiri skrin dan perlahan-lahan bergerak ke sebelah kanan. Untuk melaksanakan apa-apa "mekanisme" harus menetapkan kedudukan: relatif; kiri: -100px, di mana -100 - anggaran bilangan piksel membentuk lebar blok. Gaya ini akan membolehkan anda untuk menyembunyikan unit luar skrin, penempatannya dalam "kedudukan bermula". Kini anda boleh menggunakan skrip yang akan meningkat setiap beberapa milisaat meninggalkan nilai hartanah seunit selagi ia tidak menjadi sama dengan lebar tetingkap penyemak imbas tolak lebar unsur. Hasilnya ialah unit yang keluar dari tepi sebelah kiri, bergolek di skrin dan "diletakkan" di tangan kanannya.

Contoh lain membolehkan anda untuk membuat "saudara-mutlak" unsur-unsur. Sebagai contoh, anda boleh memasukkan mutlak dalam lain, yang mempunyai kedudukan relatif. Akibatnya, kita mempunyai "saudara" blok yang tidak mempunyai saiz yang mutlak tertulis, kini mampu nyata itu sendiri dalam kedudukan yang tiada kaitan dengan unsur sebelumnya.

kesilapan biasa apabila menggunakan kedudukan relatif

Kesilapan yang biasa apabila menggunakan relatif Jawatan adalah bahawa ramai pereka web melupakan keupayaan untuk menempah tempat dalam unit, yang boleh terletak di mana sahaja. Sebagai contoh, jika anda mempunyai yang agak besar, diletakkan di luar skrin dan mempunyai kedudukan relatif, di tempatnya akan menjadi ternganga "lubang". Walau bagaimanapun, walaupun hotel ini kadang-kadang mewujudkan kesulitan tertentu boleh digunakan untuk kebaikan, sebagai contoh, mewujudkan kesan yang menarik dari "-pemasangan diri" laman web, di mana semua blok yang secara beransur-ansur diletakkan di kedudukan teratas: 0; kiri: 0; t. e. lokasi asalnya.