Posisi Relatif - apa itu? Deskripsi rinci

Tata letak HTML adalah proses yang panjang, teliti, tapi sangat kreatif. Terlepas dari kenyataan bahwa bagi kebanyakan orang yang bekerja di bidang TI, tata letak halaman web bisa tampak seperti rutinitas yang membosankan, spesialis dengan panggilan untuk hal seperti itu tidak hanya melakukan tugas secara kualitatif, namun juga menerima kesenangan nyata dari proses itu sendiri.

Namun, sebelum menjadi perancang web berpengalaman, setiap pemula menghabiskan banyak waktu untuk mempelajari berbagai petunjuk dan spesifikasi untuk bahasa HTML dan CSS sekutunya. Ini tentang apa itu CSS, untuk apa dan apa "tipuan dengan telinga" memungkinkan Anda bangun, dan juga tentang salah satu sifat populernya - Posisi Relatif - kita akan bicara hari ini.

Apa itu CSS?

Singkatan CSS dapat diuraikan dan diterjemahkan ke bahasa Rusia sebagai "lembaran gaya cascading". Kedengarannya cukup aneh - di satu sisi, seperti kata-kata dan bisa dimengerti, tapi di sisi lain - arti umum tidak tertangkap sama sekali. Mari kita mulai dengan sederhana - dengan gaya. Teknologi ini memungkinkan Anda memberi objek pada halaman karakteristik tertentu yang berkaitan dengan tampilan, yang hanya bisa diresepkan sekali, namun digunakan dalam jumlah tak terbatas.

Kata "tabel" dalam terjemahan resmi ternyata hampir tidak disengaja. Sebenarnya, lebih tepat menggunakan kata "lembaran" atau "daftar", namun penulis terjemahan asli memutuskan bahwa CSS lebih mirip daftar daripada daftar, dan siapa kita Begitulah sekarang mereka diadili.

Akhirnya, kata "kaskade". Faktanya adalah bahwa setiap elemen dapat memiliki beberapa gaya sekaligus, yang dapat dicampur atau bahkan berpotongan. Dalam kasus seperti itu, browser harus menggunakan sejumlah peraturan, untuk benar menyusun tampilan blok, yang memiliki beberapa gaya, dengan salah satunya, misalnya, memiliki properti Posisi Relatif, dan yang lainnya - Posisi Absolut. Sebenarnya, konflik semacam itu tidak dapat ditoleransi, namun dalam proyek besar, kebingungan semacam itu sering terjadi.

Jadi, sekarang namanya sudah jelas, mari kita lihat satu contoh sederhana. Katakanlah Anda memiliki sejumlah besar tombol di situs web Anda yang dirancang dengan cara tertentu. Mereka memiliki sifat seperti ukuran, bayangan, transparansi, warna. Tentu saja, Anda dapat menentukan parameter ini, membuat setiap tombol, namun akan jauh lebih mudah menggunakan CSS. Dalam prakteknya, Anda perlu mendeskripsikan kelas di mana nilai semua properti di atas akan terdaftar, dan kemudian, alih-alih penghitungan yang panjang, tag setiap tombol hanya perlu menentukan nama kelas ini, setelah itu browser akan melukis elemen-elemen ini dalam warna yang diperlukan dan memberi mereka yang tepat. "Gloss".

Mengapa saya membutuhkan properti Posisi?

Sekarang mari kita beralih langsung ke properti Posisi, yang seluruh artikel itu dikandung. Jika Anda sudah familiar dengan bahasa Inggris atau memiliki intuisi yang baik, maka Anda seharusnya sudah mengerti - properti ini bertanggung jawab atas lokasi elemen. Sebenarnya, memang, tapi bukannya menentukan tempat tertentu, properti ini memberi tahu browser bagaimana tepatnya menempatkan item relatif terhadap tetangga atau keseluruhan halaman secara keseluruhan.

Nilai apa yang dapat dimiliki oleh properti Posisi?

Properti kita bisa mengambil beberapa nilai yang berbeda, hanya ada lima di antaranya. Berikut adalah uraian singkat masing-masing:

• Posisi Mewarisi. Properti ini memungkinkan Anda untuk menyalin data posisi barang yang merupakan induknya. Misalnya, jika Anda memiliki div dengan Posisi Relatif yang ditentukan, maka IMG bertuliskan dengan nilai pewarisan juga akan mendapatkan nilai Relatif.
• Posisi statis Nilai ini diberikan ke semua elemen secara otomatis, kecuali ditentukan lain. Elemen sesuai dengan posisi seperti yang disebutkan dalam kode dan tidak tersedia untuk berbagai "makanan lezat" yang memungkinkan mereka mengubah posisi mereka.
• Posisi Absolut. Nilai dari properti Posisi ini sering digunakan dalam kasus di mana perlu untuk membuat elemen "mengambang". Memiliki nilai properti ini, elemen tetap "tak terlihat" untuk sisa halaman. Artinya, mereka berada seolah-olah unsur absolut kita tidak ada sama sekali. Dia sendiri akan selalu tetap bertahan, tidak peduli seberapa jauh halaman itu digulir.
• Posisi tetap Dalam banyak hal, nilai ini sama dengan yang sebelumnya, namun elemen absolut melekat pada orang tua, tetap menggunakan hanya koordinat sudut kiri atas layar browser, tidak memperhatikan elemen lain yang mendahuluinya.
• Akhirnya, Posisi Relatif. Jenis nilai ini memungkinkan Anda untuk memposisikan elemen relatif terhadap yang lain, yang dapat berguna saat membuat markup adaptif, yang disebut "karet" pada masyarakat umum. Memiliki properti ini, elemen akan "bergerak terpisah" selebihnya, tanpa kehilangan kemampuan untuk mengubah lokasinya di halaman.

Fitur kerja dengan Posisi di berbagai browser

Tidak semua browser sama-sama kompatibel. Sementara kebanyakan program alternatif untuk surfing internet tanpa ada hitching yang menganggap nilai Position benar-benar benar, "chronically special" Internet Explorer menganggap properti ini tergantung versinya.

Misalnya, dengan menggunakan browser IE6 yang sudah terkubur, Anda tidak dapat menggunakan nilai Fixed and Inherit - keledai hanya mengabaikannya. Namun, terlepas dari kenyataan bahwa sejak versi ketujuh situasinya mulai diperbaiki, dan Fixed sudah diproses, untuk Mewarisi setiap orang menyukai "browser untuk mendownload browser lain" hanya ada dalam bentuk kedelapannya.

Sisa pemeriksa diam-diam menangani Posisi dari versi pertama, kecuali Opera, yang memperoleh dukungan dari properti ini dalam 4 variasinya, dirilis pada pertengahan tahun 90an.

Bekerja dengan Jabatan di Javascript

Sebenarnya, kisah bagaimana bekerja dengan properti Posisi di Javascript, kami hanya disertakan demi kepatutan. Karena properti ini tidak memiliki karakter khusus dalam nama, Anda dapat menggunakan JS tanpa perubahan, misalnya untuk mengatur div Posisi Relatif, Anda harus menyertakan baris ini: div.style.position = 'relatif'.

Seperti yang bisa Anda lihat, semuanya cukup sederhana.

Mengapa Posisi Relatif patut mendapat perhatian khusus?

Sementara sebagian besar nilai properti Posisi, untuk membuatnya lebih ringan, "meludah" pada elemen sekitarnya, dengan menggunakan nilai "posisi gaya: relatif", selalu perlu mengingat keseluruhan keseluruhan halaman, karena penggunaan yang salah dapat dengan kuat "mendistorsi" keseluruhan isi layar. .

Selain itu, hanya properti ini yang memungkinkan Anda mengubah desain tetap menjadi adaptif, karena aplikasinya secara otomatis mempengaruhi semua konten halaman. Selanjutnya, kita masih punya waktu untuk mempertimbangkan contoh dan kesalahan penggunaan nilai ini, dan Anda akan melihat nilai nyatanya dalam praktik.

Kapan saya harus menggunakan posisi relatif?

Selain tata letak halaman HTML konvensional, Position Relative sering digunakan untuk menciptakan berbagai efek menarik. Misalnya, jika Anda menginginkan sebuah elemen untuk "datang" ke sebuah halaman atau, sebaliknya, dengan lancar menuju ke tepinya, maka properti ini dapat membantu Anda mewujudkan "tipuan" ini.

Trik "serupa" diimplementasikan melalui Javascript, atau jika Anda mengupayakan tata letak progresif, melalui properti CSS3, yang memungkinkan Anda mengonfigurasi perubahan siklik dalam nilai variabel.

Selain itu, dalam beberapa kasus, adalah mungkin untuk menciptakan nilai Posisi Relatif "hibrida". CSS, meski tidak memungkinkan Anda mengatur secara bersamaan seperti posisi: relatif absolut, namun menggunakan beberapa trik, Anda tetap bisa mencapai efek ini. Pendekatan ini dapat berguna dalam kasus-kasus ketika Anda perlu membuat sesuatu seperti tooltip yang kompleks atau menu konteks. Dengan mempertimbangkan contohnya, kita pasti akan menggambarkan struktur seperti "hybrid".

Contoh menggunakan posisi relatif

Posisi Relatif adalah alat yang cukup sederhana namun fleksibel sehingga memungkinkan Anda untuk menerapkan banyak efek menarik. Agar tidak membuang waktu dan ruang untuk menulis kode template yang tidak berguna, kami memberikan beberapa algoritma verbal yang bisa menghiasi situs Anda atau halamannya masing-masing.

Mari kita mulai dengan garis "kehabisan". Misalkan Anda memiliki kebutuhan akan elemen yang akan "bepergian" dari balik tepi kiri layar dan secara bertahap bergerak ke sisi kanannya. Untuk menerapkan "mekanisme" semacam itu, Anda perlu menetapkan posisinya: relatif; Kiri: -100px, di mana -100 adalah perkiraan jumlah piksel yang membentuk lebar blok. Gaya ini akan memungkinkan Anda menyembunyikan blok di luar layar, menyetelnya ke "posisi awal". Sekarang Anda dapat menggunakan skrip yang menambahkan nilai properti kiri setiap beberapa milidetik sampai menjadi sama dengan lebar jendela browser dikurangi dengan lebar elemen. Akibatnya, kita mendapatkan satu blok yang muncul dari balik tepi kiri, digulung melalui seluruh layar dan "diparkir" di sisi kanannya.

Contoh lain memungkinkan Anda membuat elemen "relatif absolut". Misalnya, Anda bisa memasukkan yang absolut di dalam yang lain yang memiliki Posisi Relatif. Akibatnya, kita memiliki blok "relatif" yang tidak memiliki ukuran, di mana yang mutlak ditulis, mampu mewujudkan dirinya dalam posisi yang bergantung pada unsur-unsur yang mendahuluinya.

Kesalahan umum saat menggunakan Posisi Relatif

Kesalahan yang paling umum saat menggunakan Position Relative adalah banyak layout designer yang melupakan kemampuan untuk memesan ruang untuk blok yang bisa dimana saja. Misalnya, jika Anda memiliki yang cukup besar, ditempatkan di luar layar dan memiliki posisi relatif, "lubang" akan muncul di tempatnya. Namun, bahkan properti ini, terkadang menciptakan ketidaknyamanan tertentu, dapat digunakan untuk kebaikan, misalnya, menciptakan efek menarik dari situs "pengumpulan diri", di mana semua bloknya secara bertahap ditempatkan pada posisi teratas: 0; Kiri: 0; Artinya, di tempat asalnya.