Salah satu hal terbaik tentang CSS adalah gaya memberi kita kemampuan untuk memposisikan konten dan elemen pada halaman dengan cara apa pun yang bisa dibayangkan. Ini menambah struktur pada desain kami dan membantu membuat konten lebih visual.
Ada beberapa jenis yang berbeda positioning dalam CSS, masing-masing jenis ini memiliki cakupannya sendiri. Dalam bab ini, kita akan melihat beberapa kasus penggunaan yang berbeda—membuat tata letak yang dapat digunakan kembali dan memposisikan elemen sekali pakai secara unik—dan menjelaskan beberapa metode untuk melakukannya.
Pemosisian melalui floatSalah satu cara untuk memposisikan elemen pada halaman adalah melalui properti float. Properti ini cukup serbaguna dan dapat digunakan dengan berbagai cara.
Pada dasarnya, properti float mengambil elemen, menghapusnya dari aliran normal halaman, dan memposisikannya ke kiri atau kanan elemen induk. Semua elemen lain pada halaman akan membungkus elemen tersebut. Misalnya, paragraf akan membungkus gambar jika elemennya properti float disetel.
Ketika properti float diterapkan ke beberapa elemen sekaligus, hal ini memungkinkan untuk membuat tata letak dengan elemen mengambang di samping atau berlawanan satu sama lain, seperti yang ditunjukkan dalam tata letak multi-kolom.
Properti float memiliki beberapa nilai, dua yang paling populer adalah left dan right, yang memungkinkan elemen melayang ke kiri atau kanan induknya.
Gambar ( float: kiri; )
melayang dalam latihanMari kita membuat tata letak halaman umum dengan header di bagian atas, dua kolom di tengah, dan footer di bagian bawah. Idealnya, halaman ini harus diberi markup menggunakan elemen , , dan seperti yang dijelaskan dalam Pelajaran 2, Memahami HTML. Di dalam sebuah elemen HTML mungkin terlihat seperti ini:
... ... ... ...
Demonstrasi tata letak tanpa floatDi sini elemen-elemennya berada pada level blok, jadi elemen-elemen tersebut ditumpuk di atas satu sama lain secara default. Namun, kami ingin elemen-elemen ini berjalan berdampingan. Dengan mengatur float ke kiri dan kanan menjadi float, kita dapat memposisikannya sebagai dua kolom yang saling berhadapan. CSS kita akan terlihat seperti ini:
Bagian ( float: kiri; ) samping ( float: kanan; )
Sebagai referensi, elemen melayang diposisikan di sepanjang tepi elemen induk. Jika tidak ada induk, elemen mengambang akan diposisikan di sepanjang tepi halaman.
Saat kami menyetel elemen ke float, kami menghapusnya dari aliran normal dokumen HTML. Hal ini menyebabkan lebar default elemen tersebut menjadi lebar kontennya. Terkadang, misalnya saat kita membuat kolom untuk tata letak yang dapat digunakan kembali, perilaku ini tidak diinginkan. Hal ini dapat diperbaiki dengan menambahkan properti lebar dengan nilai tetap untuk setiap kolom. Selain itu, untuk mencegah elemen melayang saling bersentuhan, sehingga menyebabkan konten satu elemen bersebelahan, kita dapat menggunakan properti margin untuk mengatur jarak antar elemen.
Di bawah ini kita memperluas blok kode sebelumnya dengan menambahkan margin dan lebar untuk setiap kolom agar lebih membentuk hasil yang kita inginkan.
Bagian ( float: kiri; margin: 0 1.5%; lebar: 63%; ) samping ( float: kanan; margin: 0 1.5%; lebar: 30%; )
Demo tata letak dengan floatfloat dapat mengubah nilai tampilan elemenUntuk elemen mengambang, penting juga untuk memahami bahwa elemen tersebut dihapus dari aliran halaman normal dan bahwa nilai tampilan default elemen dapat berubah. Properti float bergantung pada nilai tampilan elemen yang disetel ke blok dan dapat mengubah nilai tampilan default elemen jika belum dirender sebagai elemen blok.
Misalnya, elemen yang tampilannya disetel ke inline , seperti elemen inline, mengabaikan properti tinggi atau lebar apa pun. Namun, jika Anda menentukan float untuk elemen sebaris, nilai tampilan akan berubah menjadi blok dan elemen tersebut sudah dapat mengambil properti tinggi atau lebar.
Saat kita mengapungkan sebuah elemen, kita perlu berhati-hati mengenai pengaruhnya terhadap nilai properti display.
Untuk dua kolom Anda dapat mengatur float, satu kolom sebagai kiri dan kolom lainnya sebagai kanan, tetapi untuk beberapa kolom kita harus mengubah pendekatan kita. Katakanlah, misalnya, kita ingin mendapatkan serangkaian tiga kolom antara elemen kita dan . Jika kita membuang elemen kita dan menggunakan tiga elemen, HTML kita akan terlihat seperti ini:
... ... ... ... ...
Untuk menyusun ketiga elemen ini dalam satu baris tiga kolom, kita harus menyetel float semua elemen ke left . Kita juga perlu menyesuaikan lebarnya untuk memperhitungkan kolom tambahan dan memposisikannya bersebelahan.
Bagian ( float: kiri; margin: 0 1,5%; lebar: 30%; )
Di sini kita memiliki tiga kolom, semuanya dengan lebar dan nilai margin yang sama, dan float disetel ke left .
Demonstrasi tata letak tiga kolom dengan konten floatClearing dan floatProperti float awalnya dirancang untuk memungkinkan konten mengalir di sekitar gambar. Sebuah gambar dapat diberi tampilan mengambang dan semua konten di sekitar gambar tersebut secara alami mengalir di sekitarnya. Meskipun ini berfungsi dengan baik untuk gambar, properti float sebenarnya tidak dimaksudkan untuk digunakan untuk tujuan tata letak dan pemosisian sehingga memiliki beberapa kendala.
Salah satu kendalanya adalah terkadang gaya yang tepat tidak muncul pada elemen yang berdekatan atau merupakan induk dari elemen mengambang. Ketika sebuah elemen disetel ke float, elemen tersebut akan dihapus dari aliran normal halaman dan, akibatnya, gaya elemen di sekitar elemen float tersebut dapat terpengaruh secara negatif.
Seringkali nilai properti margin dan padding diinterpretasikan secara salah, menyebabkan keduanya menyatu dengan elemen mengambang. Properti lain juga mungkin terpengaruh.
Bug lainnya adalah terkadang konten yang tidak diinginkan mulai membungkus elemen float. Menghapus elemen dari alur dokumen memungkinkan semua elemen di sekitar elemen melayang melewatinya dan mengambil ruang yang tersedia di sekitar elemen melayang, yang sering kali tidak diinginkan.
Dalam contoh dua kolom sebelumnya, setelah kita menambahkan float ke elemen and, namun sebelum kita menyetel properti width ke salah satu elemen tersebut, konten di dalam elemen diposisikan di antara dua elemen float di atasnya, sehingga mengisi semua ruang yang tersedia. . Akibatnya, elemen tersebut akan berada di celah antara elemen dan , mengambil ruang kosong.
Demonstrasi tata letak tanpa pembersihan apungUntuk mencegah konten membungkus elemen float, kita perlu menghapus float dan mengembalikan halaman ke aliran normal. Kita akan melihat cara membersihkan pelampung dan kemudian melihat isinya.
Kliring mengapungPengosongan float terjadi menggunakan properti clear, yang mengambil beberapa nilai berbeda: nilai yang paling umum digunakan adalah left , right , dan Both .
Div ( jelas: kiri; )
Nilai left menghapus float kiri, sedangkan nilai right menghapus float kanan. Namun, nilai keduanya akan menghapus pelampung kiri dan kanan dan sering kali merupakan pilihan paling ideal.
Kembali ke contoh sebelumnya, jika kita menggunakan properti clear dengan nilai keduanya pada sebuah elemen, kita dapat menghapus float. Penting agar clear diterapkan pada elemen yang ditentukan setelah elemen mengambang, dan bukan sebelumnya, untuk mengembalikan halaman ke aliran normal.
Footer ( jelas: keduanya; )
Demonstrasi tata letak dengan membersihkan isi float dari floatDaripada menghapus float , pilihan lainnya adalah mengatur konten menjadi float . Hasilnya akan hampir sama, namun konten float benar-benar memastikan bahwa semua gaya kita akan ditampilkan dengan benar.
Untuk mengatur konten float, elemen float harus berada di dalam elemen induk, elemen tersebut akan bertindak sebagai wadah, membiarkan aliran dokumen sepenuhnya normal di luarnya. Penataan gaya untuk elemen induk ini diwakili oleh kelas grup, seperti yang ditunjukkan di sini:
Grup::sebelum, .grup::setelah ( konten: ""; tampilan: tabel; ) .grup::setelah ( hapus: keduanya; ) .group ( hapus: keduanya; *zoom: 1; )
Tidak banyak yang terjadi di sini, tapi pada dasarnya yang dilakukan CSS hanyalah menghapus semua elemen melayang di dalam elemen grup dan mengembalikan dokumen ke aliran normal.
Lebih khusus lagi, elemen semu ::before dan ::after, seperti yang dibahas dalam Pelajaran 4, secara dinamis menghasilkan elemen di atas dan di bawah elemen dengan kelas group . Elemen-elemen ini tidak menyertakan konten apa pun dan dirender sebagai elemen tabel, mirip dengan elemen blok. Elemen yang dihasilkan secara dinamis setelah elemen grup menghapus float di dalam elemen grup, seperti yang dilakukan clear sebelumnya. Terakhir, elemen group juga menghapus semua float yang mungkin muncul sebelumnya jika ada float dengan nilai left atau right . Juga disertakan sedikit trik yang membuat browser lama dapat berfungsi dengan baik.
Ada lebih banyak kode di sini daripada sekadar perintah clear: keduanya, tetapi ini bisa sangat berguna.
Mengingat tata letak halaman dua kolom, kita dapat menggabungkan elemen induk juga. Elemen induk ini akan berisi elemen mengambang. Kodenya akan terlihat seperti ini:
... ... ... ...
Grup::sebelum, .grup::setelah ( konten: ""; tampilan: tabel; ) .grup::setelah ( hapus: keduanya; ) .grup ( hapus: keduanya; *zoom: 1; ) bagian ( float: kiri ; margin: 0 1,5%; lebar: 63%; ) samping ( float: kanan; margin: 0 1,5%; lebar: 30%; )
Demonstrasi tata letak dengan konten floatTeknik yang ditampilkan di sini dikenal sebagai "clearfix" dan sering terlihat di situs lain dengan nama kelas clearfix atau lih. Kami memilih untuk menggunakan nama kelas grup karena mewakili sekelompok elemen dan mengekspresikan konten dengan lebih baik.
Ketika elemen disetel ke float, penting untuk memantau pengaruhnya terhadap aliran halaman dan memastikan bahwa aliran halaman diatur ulang melalui pembersihan atau melalui konten float sebagaimana dimaksud. Jika tidak, melacak float dapat menyebabkan banyak masalah, terutama pada halaman yang berisi banyak baris, masing-masing dengan banyak kolom.
Dalam praktiknyaMari kembali ke situs Styles Conference dan mencoba menambahkan float ke beberapa konten.
/* ________________________________________________ ====== Clearfix ======= ===== * / .group::before, .group::after ( konten: " "; tampilan: tabel; ) .group::after ( hapus: keduanya; ) .group ( jelas: keduanya; *zoom: 1; )
Sekarang kita bisa menggunakan float, mari kita atur untuk elemen utama di dalam ke kiri dan biarkan konten lainnya di header melayang ke kanan. Untuk melakukan ini, tambahkan kelas logo ke elemen. Kemudian di dalam CSS kami, kami akan menambahkan bagian baru
gaya untuk header utama. Di bagian ini, kita akan memilih elemen dengan kelas logo dan mengatur float ke left . Konferensi Gaya
/* ========= Header utama ====== = ==================== */ .logo ( mengambang: kiri; )
Sementara kita di sini, mari tambahkan sedikit lebih banyak detail pada logo kita. Mari kita mulai dengan menempatkan elemennya
atau jeda baris antara kata “Styles” dan “Conference” untuk memaksa teks logo kita muncul dalam dua baris.
Konferensi
Karena kita membuat elemennya float, kita ingin mengatur kontennya menjadi float . Induk terdekatnya adalah elemen, jadi kita akan menambahkan kelas grup ke dalamnya. Ini akan menerapkan gaya clearfix yang kita atur sebelumnya.
...
Elemennya mulai terbentuk, jadi mari kita lihat . Mirip dengan apa yang kita lakukan dengan , kita akan mengatur float hak cipta kita ke kiri di dalam dan membiarkan semua elemen lain mengalir di sekitarnya ke kanan.
Berbeda dengan elemennya, kita tidak akan menerapkan kelas secara langsung ke elemen mengambang. Kali ini kita akan menambahkan kelas ke induk elemen float dan menggunakan pemilih CSS unik untuk memilih elemen dan kemudian memberinya float .
Mari kita mulai dengan menambahkan kelas primary-footer ke elemen. Karena kita tahu kita akan memiliki elemen melayang di dalamnya, kita harus menambahkan kelas grup saat kita melakukannya.
...
Sekarang kelas primary-footer sudah diatur pada elemen, kita dapat menggunakan kelas ini untuk memilih elemen secara spesifik menggunakan CSS. Kami ingin memberinya float seperti left . Jangan lupa untuk membuat bagian baru di file main.css kami untuk gaya footer utama.
/* ========== Ruang bawah tanah utama ====== ====== */ .primary-footer kecil ( float: kiri; )Untuk memeriksanya, di sini kita memilih elemen yang harus berada di dalam elemen dengan nilai primary-footer dari atribut class, seperti elemen kita misalnya.
Terakhir, kita akan menambahkan sedikit padding pada bagian atas dan bawah elemen, ini akan membantu memisahkannya sedikit dari halaman lainnya. Kita bisa melakukan ini secara langsung menggunakan kelas primary-footer.
Footer utama ( padding-bawah: 44px; padding-atas: 44px; )
Dengan semua perubahan pada elemen and ini, kita harus memastikan untuk membuatnya di setiap halaman, bukan hanya di halaman index.html.
Beras. 5.01. Dengan menggunakan beberapa float, elemen-elemen di halaman utama Styles Conference bekerja sama
Pemosisian melalui blok sebarisSelain menggunakan float, cara lain untuk memposisikan konten adalah dengan menggunakan properti display yang dikombinasikan dengan nilai inline-block. Metode blok sebaris, seperti yang akan kita bahas nanti, terutama berguna untuk menata halaman atau menempatkan elemen dalam satu baris di samping satu sama lain.
Ingat bahwa nilai inline-block untuk properti display menampilkan elemen dalam satu baris dan memungkinkan elemen tersebut mengambil semua properti model kotak, termasuk height, width, padding, border, dan margin. Menggunakan inline-block memungkinkan kita memanfaatkan model blok sepenuhnya tanpa harus khawatir membersihkan float apa pun.
blok sebaris dalam praktiknyaMari kita lihat contoh tiga kolom kita dari awal. Kami akan mulai dengan menyimpan HTML kami seperti ini:
... ... ... ... ...
Sekarang, alih-alih menggunakan float untuk ketiga elemen kita, kita akan mengubah nilai tampilannya menjadi inline-block , membiarkan properti margin dan lebar seperti sebelumnya. Hasilnya, CSS kita akan terlihat seperti ini:
Bagian ( tampilan: blok sebaris; margin: 0 1,5%; lebar: 30%; )
Sayangnya, kode ini saja tidak cukup untuk melakukan trik tersebut dan elemen terakhir dimasukkan ke baris baru. Ingat, karena elemen blok sebaris muncul pada baris yang bersebelahan, elemen tersebut menyertakan satu spasi di antara elemen tersebut. Ketika ukuran masing-masing ruang ditambahkan ke lebar dan nilai margin horizontal semua elemen pada garis, lebar keseluruhan menjadi terlalu besar, sehingga mendorong elemen terakhir ke baris baru. Untuk menampilkan semua elemen dalam satu baris, Anda harus menghilangkan spasi di antara masing-masing elemen.
Demonstrasi elemen blok sebaris dengan spasiMenghilangkan spasi di antara elemen blok sebarisAda beberapa metode untuk menghilangkan ruang di antara elemen blok sebaris, dan beberapa di antaranya lebih kompleks dibandingkan yang lain. Kami akan fokus pada dua hal yang paling banyak metode sederhana, yang masing-masing muncul di dalam HTML.
Solusi pertama adalah dengan menempatkan tag pembuka setiap elemen baru pada baris yang sama dengan tag penutup elemen sebelumnya. Daripada menggunakan baris baru untuk setiap elemen kita akhirnya memulai elemen pada baris yang sama. HTML kita mungkin terlihat seperti ini:
... ... ... ... ...
Menulis elemen blok sebaris dengan cara ini memastikan tidak ada spasi di antara elemen tersebut dalam HTML. Oleh karena itu, spasi tidak akan muncul saat halaman ditampilkan.
Demonstrasi elemen blok sebaris tanpa spasiMetode lain untuk menghilangkan spasi di antara elemen blok sebaris adalah dengan membuka komentar HTML segera setelah tag penutup elemen. Kemudian tutup komentar tepat sebelum tag pembuka elemen berikutnya. Hal ini memungkinkan elemen blok sebaris untuk memulai dan mengakhiri pada baris terpisah dalam HTML dan akan "mengomentari" setiap ruang potensial antar elemen. Kode yang dihasilkan akan terlihat seperti ini:
... ... ... ... ...
Tak satu pun dari opsi ini yang sempurna, namun berguna. Saya cenderung lebih suka menggunakan komentar untuk pengaturan yang lebih baik, namun opsi mana yang Anda pilih sepenuhnya terserah Anda.
Buat tata letak yang dapat digunakan kembaliSaat membangun situs, yang terbaik adalah menulis gaya modular yang dapat digunakan kembali di tempat lain, dan tata letak yang dapat digunakan kembali berada di bagian atas daftar kode yang dapat digunakan kembali. Tata letak dapat dibuat menggunakan elemen float atau elemen blok sebaris, namun mana yang paling berhasil dan mengapa?
Pertanyaan apakah elemen blok mengambang atau blok sebaris lebih baik untuk struktur halaman masih bisa diperdebatkan. Pendekatan saya adalah menggunakan elemen blok sebaris untuk membuat tata letak kisi atau halaman, dan kemudian menggunakan pelampung ketika saya ingin konten mengalir di sekitar elemen (yang dirancang untuk pelampung saat bekerja dengan gambar). Secara umum, saya juga menemukan elemen blok sebaris lebih mudah untuk dikerjakan.
Namun, gunakan yang terbaik untuk Anda. Jika Anda lebih familiar dengan satu pendekatan dibandingkan pendekatan lainnya, maka gunakanlah pendekatan tersebut.
Ada spesifikasi CSS baru yang sedang dikerjakan - khususnya properti flex dan grid - yang akan membantu Anda memutuskan cara terbaik untuk menata halaman Anda. Awasi metode ini ketika metode tersebut mulai muncul.
Dalam praktiknyaDengan pemahaman yang kuat tentang tata letak yang dapat digunakan kembali, inilah saatnya menerapkannya di situs Styles Conference kami.
Untuk situs web Styles Conference kami akan membuat tata letak tiga kolom menggunakan elemen blok sebaris. Kita akan melakukan ini sehingga kita mendapatkan tiga kolom dengan lebar yang sama, atau dua kolom dengan total lebar dibagi 2/3 untuk satu kolom dan 1/3 untuk kolom lainnya.
Pertama, kita akan membuat kelas yang menentukan lebar kolom ini. Kita akan menyebut kedua kelas ini col-1-3 untuk sepertiga dan col-2-3 untuk dua pertiga. Di bagian Grid pada file main.css kita, mari kita lanjutkan dan tentukan kelas-kelas ini dan lebarnya yang sesuai.
Kol-1-3 (lebar: 33,33%; ) .col-2-3 (lebar: 66,66%; )
Kami ingin kedua kolom muncul sebagai elemen blok sebaris. Kita juga perlu memastikan bahwa perataan vertikalnya diatur ke bagian atas setiap kolom.
Mari buat dua penyeleksi baru yang berbagi display dan vertical-align .
Kol-1-3, .col-2-3 ( tampilan: blok sebaris; perataan vertikal: atas; )
Lihatlah CSS lagi. Kami membuat dua penyeleksi kelas col-1-3 dan col-2-3 dipisahkan dengan koma. Koma di akhir pemilih pertama berarti diikuti oleh pemilih lainnya. Setelah pemilih kedua ada kurung kurawal pembuka, yang menunjukkan bahwa deskripsi gaya dimulai. Dengan menggunakan koma untuk memisahkan selector, kita dapat mengikat satu style ke beberapa selector secara bersamaan.
Kami ingin memberi ruang di antara kolom untuk membantu memecah konten. Hal ini dapat dilakukan dengan menambahkan padding horizontal pada setiap kolom.
Ini berfungsi dengan baik, namun, jika dua kolom ditempatkan bersebelahan, lebar ruang di antara keduanya akan menjadi dua kali lebih lebar dari jarak dari tepi luar. Untuk menyeimbangkannya, kita akan menempatkan semua kolom kita dalam sebuah grid dan menambahkan padding yang sama ke dalamnya.
Mari kita gunakan kelas grid untuk mendefinisikan grid kita, dan kemudian memberikan padding horizontal yang sama ke kelas grid, col-1-3, dan col-2-3. Dengan koma lagi yang memisahkan selector kita, CSS kita terlihat seperti ini:
Kisi, .col-1-3, .col-2-3 ( padding-kiri: 15px; padding-kanan: 15px; )
Saat kita menyetel padding horizontal, kita perlu berhati-hati. Ingat, pada pelajaran terakhir kita membuat sebuah container dengan kelas container untuk memusatkan semua konten kita pada halaman dengan lebar 960 piksel. DI DALAM saat ini, jika kita menempatkan elemen dengan kelas grid di dalam elemen dengan kelas container, maka padding horizontalnya akan bertambah dan kolom kita tidak akan ditampilkan secara proporsional dengan lebar halaman lainnya.
Kami akan melakukan ini dengan memecah aturan container lama menjadi sebagai berikut:
Kontainer, .grid ( margin: 0 otomatis; lebar: 960px; ) .container ( padding-kiri: 30px; padding-kanan: 30px; )
Sekarang setiap elemen dengan kelas container atau grid akan memiliki lebar 960 piksel dan terletak di tengah halaman. Selain itu, kami telah mempertahankan padding horizontal yang ada untuk setiap elemen dengan kelas container dengan memindahkannya ke kumpulan aturan baru yang terpisah.
Oke, semua bagian sulit dalam menyiapkan mesh sudah selesai. Sekarang saatnya bekerja dengan HTML kita dan melihat bagaimana kelas-kelas ini bekerja.
Kita akan mulai dengan teaser di halaman beranda, di file index.html, disejajarkan dalam tiga kolom. Saat ini, teaser dibungkus dalam sebuah elemen dengan kelas container. Kami ingin mengubah kelas container menjadi grid sehingga kami dapat mulai menempatkan kolom di dalamnya.
...
... ... ...
Dan yang terakhir, karena masing-masing kolom kita adalah elemen blok sebaris, kita perlu memastikan bahwa kita menghilangkan spasi kosong di antara kolom-kolom tersebut. Untuk melakukan ini kita akan menggunakan komentar dan menambahkan beberapa dokumentasi ke setiap bagian untuk mengatur kode kita dengan lebih baik.
... ... ...
Untuk memeriksanya, kami meninggalkan komentar di baris 3 yang mengidentifikasi bagian “Speaker” yang mengikutinya. Di akhir baris 7, kita membuka komentar tepat setelah tag penutup. Di dalam komentar ini, pada baris 9 kami mendefinisikan bagian berikut "Jadwal". Lalu kita tutup komentar di awal baris 11, tepat sebelum tag pembuka. Struktur komentar serupa muncul pada baris 13 hingga 17 di antara dua elemen, tepat sebelum bagian "Tempat". Secara umum, kami mengomentari potensi spasi kosong di antara kolom, sekaligus menggunakan komentar yang sama untuk mengidentifikasi bagian kami.
Kami sekarang memiliki kisi tiga kolom yang dapat digunakan kembali yang mendukung tata letak berbeda, menggunakan lebar kolom 1/3 dan 2/3. Halaman beranda kami sekarang berisi tiga kolom, memisahkan semua teaser.
Beras. 5.02. Halaman rumah Styles Conference sekarang menyertakan tata letak tiga kolom
Demo dan kode sumberDi bawah ini Anda dapat melihat situs web Styles Conference dalam keadaannya saat ini, serta mengunduh kode sumber situs tersebut saat ini.
Penempatan elemen yang unikCepat atau lambat semua orang ingin memposisikan elemen dengan tepat, tetapi elemen float atau inline-block tidak mengizinkan trik seperti itu. Elemen mengambang yang menghapus elemen dari alur halaman sering kali memberikan hasil yang tidak diinginkan karena elemen di sekitarnya membungkus elemen mengambang tersebut. Elemen blok sebaris, kecuali kita membuat kolom, bisa jadi sangat canggung posisi yang benar. Untuk situasi seperti ini, kita dapat menggunakan properti position yang dikombinasikan dengan properti offset blok.
Properti position menentukan bagaimana elemen diposisikan pada halaman dan apakah elemen tersebut akan ditampilkan dalam alur dokumen normal. Ini digunakan bersama dengan properti offset blok top , right , bottom dan left , yang menentukan secara tepat di mana elemen akan diposisikan dengan menggerakkan elemen ke arah yang berbeda.
Secara default, nilai position setiap elemen diatur ke static , artinya elemen tersebut ada dalam aliran normal dokumen dan tidak menggunakan properti apa pun untuk memposisikannya. Nilai static paling sering ditimpa dengan nilai relative atau absolute , yang akan kita lihat selanjutnya.
Posisi RelatifMenyetel properti posisi ke relatif memungkinkan elemen muncul dalam aliran halaman normal, memberikan ruang untuk elemen sebagaimana dimaksud dan mencegah elemen lain mengalir di sekitarnya. Namun, ini juga memungkinkan Anda mengubah posisi elemen menggunakan properti offset. Misalnya, pertimbangkan HTML dan CSS berikut:
... ... ...
Div ( tinggi: 100px; lebar: 100px; ) .offset ( kiri: 20px; posisi: relatif; atas: 20px; )
Demonstrasi Pemosisian RelatifDi sini, elemen kedua dengan kelas offset memiliki nilai posisinya yang disetel ke relative , serta dua properti offset - left dan top . Hal ini menjaga posisi asli elemen dan elemen lainnya tidak diperbolehkan berpindah ke area tersebut. Selain itu, properti offset memindahkan elemen dengan mendorongnya 20 piksel dari kiri dan 20 piksel dari atas lokasi aslinya.
Untuk elemen yang posisinya relatif, penting untuk mengetahui bahwa properti offset blok menentukan ke mana elemen akan dipindahkan, berdasarkan posisi aslinya. Jadi properti kiri dengan nilai 20 piksel sebenarnya mendorong elemen ke kanan sebesar 20 piksel. Properti teratas dengan nilai 20px kemudian akan mendorong elemen ke bawah 20px.
Saat kita memposisikan elemen menggunakan properti offset, elemen tersebut akan menimpa elemen di bawahnya, bukannya mendorongnya ke bawah seperti yang dilakukan properti margin atau padding.
Penempatan mutlakNilai absolut untuk properti position berbeda dari nilai relatif karena elemen yang diposisikan secara absolut tidak muncul dalam aliran normal dokumen, dan ruang serta posisi asli dari elemen yang diposisikan secara absolut tidak dicadangkan.
Selain itu, elemen yang diposisikan secara mutlak bergerak relatif terhadap elemen induk yang posisinya relatif terdekat. Jika induk yang diposisikan secara relatif tidak ada, maka elemen yang diposisikan secara absolut akan diposisikan relatif terhadap elemen tersebut. Ini adalah sedikit informasi; mari kita lihat cara kerjanya di dalam beberapa kode:
...
Bagian ( posisi: relatif; ) div ( posisi: absolut; kanan: 20px; atas: 20px; )
Demonstrasi Pemosisian AbsolutContoh ini memposisikan elemen secara relatif tetapi tidak menyertakan properti offset apa pun. Oleh karena itu, posisinya tidak berubah. Elemen dengan kelas offset menyertakan nilai posisi absolute . Karena elemen tersebut adalah elemen induk yang posisinya paling dekat dengan elemen tersebut, maka elemen tersebut akan diposisikan relatif terhadap elemen tersebut.
Untuk elemen yang posisinya relatif, properti offset menentukan arah pergerakan elemen relatif terhadap dirinya sendiri. Untuk elemen dengan posisi absolut, properti offset menentukan ke arah mana elemen akan dipindahkan relatif terhadap induk yang memiliki posisi relatif terdekat.
Sebagai hasil dari properti kanan dan atas, elemen akan muncul 20 piksel dari kanan dan 20 piksel dari dalam atas.
Karena elemen diposisikan secara mutlak, maka tidak diposisikan dalam aliran normal halaman dan akan tumpang tindih dengan elemen di sekitarnya. Selain itu, posisi aslinya tidak dipertahankan dan elemen lain mungkin menggantikannya. Secara umum, sebagian besar pemosisian dapat terjadi tanpa menggunakan properti posisi dan properti offset, namun dalam beberapa kasus, keduanya bisa sangat berguna.
MelanjutkanMempelajari cara memposisikan konten dalam HTML dan CSS adalah langkah besar menuju penguasaan bahasa-bahasa ini. Tambahkan ke model blok ini dan kami siap menjadi pengembang front-end.
Dari penulis: Salam. Penempatan elemen CSS merupakan topik yang sangat penting dalam pembuatan website. Pada artikel ini, saya mengusulkan untuk melihat lebih detail semua cara memindahkan blok di sekitar halaman web.
Apa saja jenisnyaJika kita berbicara tentang posisi elemen blok, maka diatur menggunakan properti position. Ini memiliki empat arti dan masing-masing patut mendapat pertimbangan terpisah.
Penempatan mutlakIni adalah yang pertama spesies yang diketahui. Ini diatur seperti ini: posisi: absolut. Setelah ini, blok kehilangan sifat biasanya dan benar-benar keluar dari aliran normal. Aliran apa ini? Coba tempatkan beberapa elemen blok berturut-turut di markup Anda. Bagaimana jadinya mereka nanti? Satu demi satu, dan tidak ada yang lain.
Ini adalah perilaku normal blok secara default. Namun apa yang terjadi pada blok yang posisi absolutnya telah ditentukan? Itu benar-benar keluar dari aliran normal, blok lain berhenti menyadarinya, seolah-olah itu tidak pernah ada, tetapi elemennya tetap ada di halaman. Pemosisian absolut dalam CSS sering digunakan untuk penempatan elemen dekoratif, ikon, dan hal desain lainnya secara tepat.
Sekarang dapat dipindahkan menggunakan properti kiri, kanan, atas dan bawah. Secara default, pergerakannya relatif terhadap tepi jendela browser, tetapi jika elemen induk memiliki posisi: relatif, maka pergerakannya relatif terhadap blok induk.
Blokir( posisi: absolut; bawah: 0; kanan: 0; )
Memblokir ( posisi: mutlak; bawah: 0; kanan : 0 ; |
Elemen akan dipindahkan ke pojok kanan bawah. Saya perhatikan bahwa mereka sering membuat tombol atas dengan cara ini - mereka hanya meletakkannya di paling pojok. Berikut contoh lain di mana saya akan menampilkan kemungkinan markup terlebih dahulu:
< div id = "wrapper" > < div class = "block" > < / div > < / div > |
Dan sekarang gaya css untuk fragmen ini:
#wrapper( posisi: relatif; ) .block( posisi: absolut; atas: 0; kanan: 10px; )
#pembungkus( posisi: relatif; Memblokir ( posisi: mutlak; atas: 0; kanan: 10 piksel; |
Dalam contoh ini, pertama-tama kami menetapkan posisi relatif ke wadah induk (relatif - lebih lanjut tentang itu nanti di artikel), dan kemudian menetapkan posisi absolut untuk elemen.blok yang sama. Akibatnya, koordinat akan dihitung bukan dari jendela browser itu sendiri, tetapi dari tepi elemen induk, yaitu blok pembungkus.
Ini adalah tipe berikutnya dan ditulis seperti ini – posisi: relatif. Koordinat ditentukan oleh properti yang sama seperti posisi absolut. Satu-satunya perbedaan yang signifikan adalah bahwa elemen tersebut tidak keluar dari aliran secara formal - masih ada ruang tersisa untuknya.
Pengoperasian nilai ini dapat dibandingkan dengan visibilitas: tersembunyi, ketika elemen disembunyikan dari halaman, namun ruang di bawahnya tetap tidak tersentuh. Hal yang sama terjadi dengan penempatan relatif - balok dapat dipindahkan ke mana saja, tetapi ruangnya tetap kosong dan tidak akan ditempati oleh bagian lain.
Penting juga untuk mengetahui bahwa offset tidak terjadi dari tepi jendela browser web, tetapi dari tempat di mana blok tersebut awalnya berdiri. Yaitu:
Blokir( posisi: relatif; atas: 10px; kanan: 50px; )
Memblokir ( posisi: relatif; atas: 10 piksel; kanan : 50 piksel; |
Blok tersebut akan berpindah 50 piksel ke kanan dan 10 piksel ke kiri.
Anda mungkin pernah melihat lebih dari sekali di situs-situs di Internet ketika, ketika digulir, beberapa spanduk tidak hilang, tetapi terus berada di zona visibilitas Anda, seolah-olah menempel di satu tempat. Hal ini terutama diimplementasikan menggunakan pemosisian tetap. Untuk melakukan ini, Anda perlu menulis:
Posisi: posisi statis statis atau normalTipe terakhir adalah statis, ini adalah perilaku normal elemen blok. Tidak perlu ditentukan, karena sudah default, tetapi Anda tetap perlu mengetahui nilai keempat. Terkadang position: static ditulis untuk mengesampingkan jenis positioning lain ketika peristiwa tertentu terjadi pada halaman web.
Kita telah membahas maknanya, namun hal ini belum cukup untuk menutup topik ini. Sebenarnya Anda perlu memahami di mana dan jenis positioning apa saja yang perlu diterapkan. Saya telah memberi Anda contoh dengan fixed - ini dapat digunakan untuk membuat kolom, header, atau footer samping yang lengket.
Penentuan posisi relatif akan membantu ketika Anda perlu sedikit memindahkan balok relatif terhadap posisinya dan pada saat yang sama mempertahankan tempatnya dalam arus. Hal ini juga diberikan kepada blok induk untuk menggunakan gerakan absolut untuk elemen anak.
Teknik lainnya: centering, floating blockProperti position tidak menyelesaikan semua masalah penempatan elemen blok. Bagaimana Anda, misalnya, membuat kisi situs menggunakannya? Saya tidak punya ide bagus. Di sinilah properti lain bisa membantu.
Grid sering kali dibuat menggunakan float di CSS. Properti ini memungkinkan Anda untuk menekan sebuah blok ke tepi kiri atau kanan induknya (float: left, float: right), memungkinkan beberapa elemen blok berbaris dalam satu baris, yang umum terjadi di situs mana pun.
Pemusatan dilakukan seperti ini: blok perlu menulis lebar tertentu, dan kemudian mengatur properti margin: 0 auto. Ini adalah nilai otomatis yang akan menyelaraskannya secara horizontal tepat di tengah. Tentu saja, untuk ini ia harus menjadi satu-satunya yang ada di lininya, jika tidak, tidak ada yang akan berhasil.
Semua jenis positioning yang tercantum dalam artikel ini dapat bermanfaat bagi pengembang web. Di suatu tempat Anda perlu memasukkan ikon (posisi: absolut), di suatu tempat Anda perlu sedikit menyesuaikan posisi blok, menyisakan sedikit ruang di belakangnya (posisi: relatif), dan di suatu tempat Anda perlu memperbaiki widget (posisi: tetap). Secara umum, pengetahuan tentang properti ini pasti tidak akan berlebihan.
Nah, untuk belajar lebih banyak lagi tentang dunia pembuatan website, pastikan untuk berlangganan blog kami dan menerima materi pelatihan baru. Saya juga menyarankan Anda untuk melihat topik kami, di mana topik serupa juga diangkat. (posisi elemen)
Vlad Merzhevich
Positioning adalah kedudukan suatu elemen dalam suatu sistem koordinat. Ada empat jenis penentuan posisi: normal, absolut, tetap, dan relatif. Tergantung pada tipe yang diatur melalui properti posisi, sistem koordinat juga berubah.
Berkat kombinasi properti position , left , top , right dan bottom, suatu elemen dapat ditumpangkan satu sama lain, ditampilkan pada suatu titik dengan koordinat tertentu, ditetapkan pada lokasi tertentu, menentukan posisi suatu elemen relatif terhadap elemen lainnya, dll. Mirip dengan yang lain Properti CSS Kontrol posisi tersedia melalui skrip. Dengan demikian, Anda dapat mengubah posisi elemen secara dinamis tanpa memuat ulang halaman, membuat animasi, dan berbagai efek.
Penempatan normalJika properti position elemen tidak disetel atau nilainya static , elemen tersebut dirender dalam aliran dokumen seperti biasa. Dengan kata lain, elemen ditampilkan pada halaman sesuai urutan kemunculannya kode sumber HTML.
Properti left , top , right , bottom , jika ditentukan, akan diabaikan.
Penempatan mutlakDengan pemosisian absolut, elemen tidak ada dalam aliran dokumen dan posisinya diatur relatif terhadap tepi browser. Anda dapat mengatur tipe ini melalui nilai absolut properti posisi. Koordinat ditentukan relatif terhadap tepi jendela browser, yang disebut “area terlihat” (Gbr. 3.42).
Beras. 3.42. Nilai properti kiri, kanan, atas dan bawah untuk penentuan posisi absolut
Mode ini ditandai dengan beberapa fitur berikut.
- Lebar lapisan, kecuali ditentukan secara eksplisit, sama dengan lebar konten ditambah nilai margin, batas, dan padding.
- Suatu lapisan tidak mengubah posisi aslinya kecuali ia mempunyai properti right , left , top , dan bottom .
- Properti kiri dan atas lebih diutamakan daripada properti kanan dan bawah. Jika kiri dan kanan saling bertentangan, maka nilai kanan diabaikan. Hal yang sama berlaku untuk bagian bawah.
- Jika kiri disetel ke nilai negatif, lapisan akan melampaui tepi kiri browser, dan bilah gulir tidak akan muncul. Ini adalah salah satu cara untuk menyembunyikan elemen dari pandangan. Hal yang sama berlaku untuk properti top, hanya layer yang akan melampaui tepi atas.
- Jika kiri disetel ke nilai yang lebih besar dari lebar area yang terlihat, atau kanan disetel ke nilai negatif, bilah gulir horizontal akan muncul. Aturan serupa juga berlaku pada top , hanya saja kita akan membahas tentang bilah gulir vertikal.
- Pada saat yang sama, properti kiri dan kanan yang ditentukan membentuk lebar lapisan, tetapi hanya jika lebarnya tidak ditentukan. Setelah Anda menambahkan properti lebar, nilai yang tepat akan diabaikan. Hal yang sama akan terjadi dengan tinggi lapisan, hanya properti top , bottom dan height yang terlibat.
- Elemen dengan posisi absolut bergerak bersama dokumen saat Anda menggulir.
Properti position, yang disetel ke absolut, dapat digunakan untuk membuat efek bingkai. Selain pemosisian absolut untuk elemen, Anda harus menetapkan properti overflow dengan nilai auto . Kemudian, ketika konten melebihi ketinggian area yang terlihat, akan muncul bilah gulir. Tinggi dan lebar "bingkai" dihasilkan secara otomatis dengan menggunakan properti left , right untuk lebar dan top , bottom untuk tinggi secara bersamaan (contoh 3.31).
Contoh 3.31. Membuat analogi bingkai
Badan pemosisian absolut ( margin: 0; ) #sidebar, #content ( posisi: absolut; ) #sidebar, #content ( overflow: auto; padding: 10px; ) #header ( tinggi: 80px; /* Tinggi lapisan */ latar belakang: #FEDFC0; batas bawah: 2px padat #7B5427; ) #header h1 ( padding: 20px; margin: 0; ) #sidebar ( lebar: 150px; latar belakang: #ECF5E4; batas kanan: 1px padat #231F20; atas: 82px ; /* Jarak dari tepi atas */ bawah: 0; /* Jarak dari bawah */ ) #content ( atas: 82px; /* Jarak dari tepi atas */ kiri: 170px; /* Jarak dari tepi kiri */ bawah: 0 ; kanan: 0; ) Pilaf bangsa-bangsa di dunia
Pilaf gaya Fergana
pilaf Uzbekistan
pilaf Siberia
pilaf Italia
pilaf Estonia
Pilaf gaya Amerika
Pilaf gaya India
Pilaf gaya FerganaMasukkan daging yang sudah dipotong-potong ke dalam kuali dan goreng hingga terbentuk kerak. Tumis bawang bombay, potong cincin, bersama daging hingga kemerahan, lalu masukkan wortel, potong-potong. Tambahkan setengah garam, campur semuanya dan goreng hingga wortel berubah warna menjadi coklat keemasan. Setelah itu, tuangkan setengah jumlah air yang dibutuhkan dan biarkan mendidih.
Tutupi nasi secara merata, besarkan api dan segera tuangkan air hingga menutupi nasi 1-1,5 cm. Segera setelah air menguap, gunakan sendok berlubang untuk mengumpulkan pilaf di gundukan ke arah tengah , tusuk dengan tongkat di beberapa tempat agar air yang ada di permukaan turun ke dasar. Kemudian tutupi pilaf dan diamkan selama 20-25 menit.
Campur pilaf yang sudah jadi hingga merata, pindahkan ke piring besar, dan letakkan daging di atasnya.
Hasil contoh ini ditunjukkan pada Gambar. 3.43. Lapisan header dirender dalam aliran seperti biasa, dan bilah sisi serta lapisan konten diposisikan secara mutlak.
Beras. 3.43. Menerapkan positioning absolut
Di IE6, elemen yang diposisikan secara absolut tidak dapat memiliki properti left , right dan top , bottom secara bersamaan.
Pemosisian absolut juga digunakan untuk membuat berbagai efek, seperti keterangan alat foto. Berbeda dengan atribut title pada tag yang juga menampilkan teks tooltip, melalui gaya Anda dapat mengontrol jenis teks yang ditampilkan menggunakan skrip.
Pertama, mari buat layer kosong dengan pengidentifikasi floatTip dan tentukan gayanya. Tiga properti gaya harus diperlukan - position dengan nilai absolute , display dengan nilai none menyembunyikan lapisan, dan width menyetel lebar lapisan dengan tooltip. Properti lainnya digunakan atas permintaan pengembang dan dimaksudkan untuk mengubah desain lapisan (contoh 3.32).
Contoh 3.32. Gaya keterangan alat
#floatTip ( posisi: absolut; /* Posisi absolut */ lebar: 250px; /* Lebar blok */ tampilan: tidak ada; /* Menyembunyikan dari tampilan */ batas: 1px solid #000; /* Parameter bingkai */ padding: 5px ; /* Margin di sekitar teks */ font-family: sans-serif; /* Font berantai */ ukuran font: 9pt; /* Ukuran font */ warna: #333; /* Warna latar belakang */ )
Script itu sendiri terdiri dari dua fungsi - moveTip() melacak pergerakan mouse dan mengubah posisi layer sesuai dengan koordinat kursor, dan toolTip() mengontrol visibilitas layer dan menampilkan teks yang diinginkan di dalamnya (contoh 3.33).
Contoh 3.33. Skrip keluaran lapisan
Document.onmousemove = moveTip; function moveTip(e) ( floatTipStyle = document.getElementById("floatTip").style; w = 250; // Lebar lapisan // Untuk browser IE if (document.all) ( x = event.x + document.body.scrollLeft ; y = event.y + document.body.scrollTop; // Untuk browser lain ) else ( x = e.pageX; // Koordinat X dari kursor y = e.pageY; // Koordinat Y dari kursor ) // Tampilkan layer di sebelah kanan kursor jika ((x + w + 10)< document.body.clientWidth) { floatTipStyle.left = x + "px"; // Показывать слой слева от курсора } else { floatTipStyle.left = x - w + "px"; } // Положение от верхнего края окна браузера floatTipStyle.top = y + 20 + "px"; } function toolTip(msg) { floatTipStyle = document.getElementById("floatTip").style; if (msg) { // Выводим текст подсказки document.getElementById("floatTip").innerHTML = msg; floatTipStyle.display = "block"; // Показываем слой } else { floatTipStyle.display = "none"; // Прячем слой } }
Untuk kenyamanan dan keserbagunaan, skrip harus ditempatkan di dalamnya berkas terpisah dan menghubungkannya melalui atribut src dari tag. Kode terakhir ditunjukkan pada Contoh 3.34.
Contoh 3.34. Membuat keterangan alat
Tooltip #floatTip ( posisi: absolut; lebar: 250px; tampilan: tidak ada; batas: 1px solid #000; padding: 5px; font-family: sans-serif; ukuran font: 9pt; warna: #333; latar belakang: # ECF5E4 ; opasitas: 0,85; /* Transparansi lapisan */ )
" + "Lensa: Canon EF 24-105 f/4L IS USM
" + "Flash: Canon Speedlite 580 EX
" + "Kecepatan rana: 1/125
Bukaan: 5,6")" onmouseout="toolTip()" />
Hasil dari contoh ini ditunjukkan pada Gambar. 3.44. Harap dicatat bahwa pembungkusan teks saat memanggil fungsi toolTip() adalah untuk tujuan keterbacaan dan dalam sintaksis JavaScript. Di Safari, skrip terkadang tidak berfungsi saat membungkus teks, dalam hal ini teks harus ditulis dalam satu baris. Properti opacity CSS3 telah ditambahkan ke gaya, yang menambahkan sedikit transparansi pada lapisan. Properti ini tidak didukung di IE sebelum versi 9.0.
Beras. 3.44. Keterangan alat dirender menggunakan JavaScript
Posisi tetapPosisi tetap suatu lapisan ditentukan oleh nilai tetap properti posisi dan serupa dengan efek posisi absolut. Namun berbeda dengan itu, ia mengikat titik pada layar yang ditentukan oleh properti left , top , right dan bottom dan tidak mengubah posisinya saat menggulir halaman web. Perbedaan lain dari lapisan absolut adalah ketika lapisan tetap melampaui area yang terlihat di kanan atau di bawahnya, bilah gulir tidak muncul.
Jenis positioning ini digunakan untuk membuat menu, tab, header, secara umum, elemen apa pun yang harus diperbaiki pada halaman dan selalu terlihat oleh pengunjung. Contoh 3.35 menunjukkan penambahan footer yang tetap berada di satu tempat terlepas dari jumlah informasi di situs.
Contoh 3.35. Ruang Bawah Tanah Tetap
XHTML 1.0 CSS 2.1 YAITU Cr Op Sa Fx
Memperbaiki footer BODY ( margin-bottom: 50px; ) #footer ( posisi: tetap; /* Posisi tetap */ kiri: 0; bawah: 0; /* Pojok kiri bawah */ padding: 10px; /* Margin di sekitar teks */ latar belakang: #39b54a; /* Warna latar belakang */ warna: #fff; /* Warna teks */ lebar: 100%; /* Lebar lapisan */ ) Semua metode penangkapan singa yang tercantum di situs bersifat teoritis dan berdasarkan metode komputasi. Penulis tidak menjamin keselamatan Anda saat menggunakannya dan menolak semua tanggung jawab atas hasilnya.
Ingat, singa adalah predator dan hewan berbahaya!
Vlad Merzhevich
Hasil dari contoh ditunjukkan pada Gambar. 3.45. Karena footer tetap menutupi dan menyembunyikan teks, bantalan bawah telah ditambahkan untuk pemilih BODY. IE6 tidak mendukung nilai tetap, jadi contoh ini tidak akan berfungsi dengan benar di sana.Beras. 3.45. Footer di bagian bawah halaman
Posisi Relatif
Menyetel properti position ke relative akan menyetel posisi elemen relatif terhadap posisi aslinya. Menambahkan properti left , top , right , dan bottom akan mengubah posisi elemen dan memindahkannya ke satu sisi atau lainnya dari lokasi aslinya. Nilai positif ke kiri menunjukkan pergeseran ke kanan dari batas kiri elemen, nilai negatif menentukan pergeseran ke kiri. Nilai positif dari atas menunjukkan pergeseran elemen ke bawah (Gbr. 3.46), nilai negatif menunjukkan pergeseran ke atas.
Beras. 3.46. Nilai properti kiri dan atas untuk penentuan posisi relatif
Properti bawah dan kanan memiliki efek sebaliknya. Dengan nilai positif, elemen digeser ke kanan ke kiri tepi kanannya, dengan nilai negatif, elemen digeser ke kanan (Gbr. 3.47). Nilai bawah yang positif akan menggerakkan elemen ke atas, nilai bawah yang negatif akan menggerakkan elemen ke bawah.
- Beras. 3.47. Nilai properti kanan dan bawah untuk penentuan posisi relatif
- Penempatan relatif dicirikan oleh ciri-ciri berikut.
Jenis pemosisian ini tidak berlaku untuk elemen tabel seperti sel, baris, kolom, dll.
Apabila suatu unsur digeser relatif terhadap kedudukan semula, maka ruang yang ditempati unsur tersebut tetap kosong dan tidak diisi oleh unsur-unsur di bawah atau di atasnya.
XHTML 1.0 CSS 2.1 YAITU Cr Op Sa Fx
Heading H1 ( font: bold 2em Arial, Tahome, sans-serif; /* Opsi font */ warna: #fff; latar belakang: #375D4C; padding: 0 10px; ) H1 SPAN ( posisi: relatif; /* Posisi relatif */ atas: 0,3em; /* Pindah ke bawah */ ) Az dan beech ilmu font
Font adalah sarana untuk mengekspresikan desain, bukan bacaan biasa.
Hasil dari contoh ini ditunjukkan pada Gambar. 3.48.
Beras. 3.48. Pergeseran teks relatif terhadap posisi aslinya
Lapisan bersarangBiasanya, pemosisian relatif itu sendiri tidak sering digunakan, karena ada sejumlah properti yang pada dasarnya menjalankan peran yang sama, misalnya margin yang sama. Namun kombinasi berbagai jenis pemosisian untuk lapisan bersarang adalah salah satu teknik tata letak yang mudah dan praktis. Jika Anda menetapkan relatif untuk elemen induk dan absolut untuk elemen turunan, maka sistem koordinat berubah dan posisi elemen turunan relatif terhadap induknya ditunjukkan (Gbr. 3.49).
Beras. 3.49. Nilai properti kiri, kanan, atas, dan bawah pada lapisan bersarang
Koordinat dihitung dari tepi bagian dalam perbatasan; nilai bidang tidak diperhitungkan. Contoh berikut menempatkan teks di sudut kanan bawah layer dekat perbatasan, mengabaikan properti padding.
Teks 20 piksel). Perilaku ini disebut dengan collapsing margin. Dua indentasi digabungkan menjadi satu. Elemen yang diposisikan secara mutlak tidak memiliki margin untuk diciutkan, sehingga hasilnya mungkin tidak seperti yang Anda harapkan.
Di IE6, sebuah elemen selalu dipilih di bagian atas tumpukan, terlepas dari indeks-z atau indeks-z elemen di sekitarnya.
IE6 dan IE7 memiliki masalah lain dengan indeks-z. IE melihat elemen induk untuk menentukan grup elemen mana yang berada di bagian atas tumpukan, browser lain menggunakan konteks global. Misalnya:
Kami memperkirakan paragraf akan tampak lebih tinggi daripada gambar karena indeks z-nya lebih besar. Namun, IE6 dan IE7 menempatkan gambar lebih tinggi karena berada di tumpukan dokumen yang berbeda. Satu tumpukan untuk div, tumpukan kedua untuk img, dan gambar memiliki indeks z lebih tinggi daripada div.Kesimpulan
Properti position mengatur perilaku pemosisian suatu elemen menurut salah satu skema pemosisian. Nilai properti yang tersedia adalah absolute , relative , fixed , static (default) dan mewarisi .
Properti z-index hanya dapat diterapkan pada elemen dengan set properti posisi. Itu menambahkan dimensi ketiga ke halaman dan mengatur urutan tumpukan elemen.
Properti position tampaknya mudah dimengerti, namun cara kerjanya sedikit berbeda dari yang terlihat pada pandangan pertama. Seringkali pengembang berpikir bahwa mereka memerlukan pemosisian relatif, meskipun kemungkinan besar mereka harus menggunakan pemosisian absolut. Pada dasarnya, properti float digunakan selama tata letak, dan properti position diperlukan untuk elemen yang ingin Anda "keluarkan" dari alur umum dokumen.
Seperti yang mungkin sudah Anda ketahui, Anda dapat mengatur tata letak situs web menggunakan tabel, dalam hal ini halaman dibagi menjadi beberapa sel. Anda juga dapat menggunakan blok untuk tujuan ini ketika halaman situs web terdiri dari elemen individual.
Saya mungkin tidak salah jika saya mengatakan bahwa masalah serius bagi banyak webmaster pemula adalah tugas menempatkan blok di tempat tertentu pada halaman web.
Salah satu kesulitan utama saat tata letak menggunakan balok adalah penempatan (penyelarasan) balok-balok tersebut.
Sedikit tentang lapisanSaya pikir banyak dari Anda telah mendengar tentang hal seperti lapisan. Dan, sebagai aturan, lapisan dipahami sebagai blok yang ditentukan oleh tag. Faktanya, semuanya sedikit berbeda.
Tidak ada lapisan dalam HTML. Itu hanya metafora. Jika kita berbicara tentang lapisan, yang mereka maksud adalah wadah (elemen) html tertentu yang dapat ditempatkan di tempat tertentu pada halaman web.
Kesalahpahaman kedua adalah mengklasifikasikan hanya blok yang ditentukan oleh tag sebagai lapisan. Hal ini juga tidak benar. Ini mungkin juga termasuk paragraf (
), daftar (
- ) dan elemen lainnya. Dan sekarang tentang ah.
Seperti disebutkan di atas, Anda dapat mengatur lokasi elemen HTML apa pun. Tidak perlu selalu menggunakan tag untuk ini. Selain itu, penggunaan tag ini tidak mewajibkan Anda untuk memberikannya posisi apa pun di halaman web.
Arti menggunakan blok yang ditentukan oleh tag adalah untuk memperbesar. Lagi pula, Anda dapat menempatkan elemen lain di dalamnya (paragraf, gambar, dll.). Ini menciptakan blok besar dengan konten bervariasi, yang lebih mudah diposisikan pada halaman web daripada setiap elemen satu per satu.
Penempatan elemen.Ada empat jenis penentuan posisi utama:
1. Statis
2. Mutlak
3. Memperbaiki
4. Relatif
Digunakan sebagai lokasi default. Dalam hal ini, browser melihat kode html, membaginya menjadi beberapa elemen dan membuat halaman darinya. Hasilnya adalah rangkaian sejumlah elemen. Mereka ditampilkan sesuai urutan yang ditunjukkan dalam kode html.
Menerapkan parameter kiri, atas, kanan dan bawah tidak membuahkan hasil apa pun.
Pemosisian statis harus diingat ketika pemosisian relatif digunakan.
MutlakDengan menggunakan pemosisian absolut, koordinat sudut kiri atas blok ditentukan. Dalam hal ini, koordinat dihitung relatif terhadap lokasi elemen induk. Jika elemen induknya adalah jendela browser, maka blok tersebut disejajarkan relatif terhadapnya. Jika ada elemen lain di mana blok itu berada, maka penyelarasan terjadi relatif terhadap elemen tersebut.
TetapDari namanya sudah jelas bahwa dalam hal ini elemennya tetap. Itu terletak di tempat tertentu di halaman web dan tidak berpindah kemana pun. Jenis perataan ini sering digunakan untuk pop-up, yang berada di tengah dan tidak bergerak saat Anda menggulir halaman.
RelatifPenentuan posisi seperti ini mungkin sulit. Namanya tidak sepenuhnya tepat. Banyak orang mengacaukan posisi elemen secara relatif dan absolut. Tampaknya perataannya relatif terhadap elemen induk. Dan dalam hal penentuan posisi absolut - relatif terhadap jendela browser. Tapi itu tidak benar.
Perlu dipahami bahwa susunan elemen dalam hal ini terjadi relatif terhadap tempatnya pada posisi statis. Inilah yang disebutkan di atas.
Sederhananya, Anda memberi tahu browser untuk memindahkan elemen sebanyak piksel yang sesuai dengan lokasi defaultnya.
Ada hal sulit lainnya. Apa yang terjadi jika elemen induk memiliki posisi relatif, namun elemen yang disarangkan memiliki posisi absolut? Dalam hal ini, koordinat elemen anak akan dihitung relatif terhadap elemen induk, dengan mempertimbangkan offsetnya, jika ada.
Mari kita rangkum.Jadi, ada properti posisi. Properti ini dapat mengambil 4 nilai Statis, Absolut, Tetap dan Relatif. Standarnya adalah Statis.
Saat Anda menentukan koordinat suatu elemen, Anda juga harus memberi tahu browser cara menghitung koordinat tersebut. Kita perlu memberinya titik awal.
Jangan lupa bahwa jika properti posisi tidak ada, koordinat tidak akan diperhitungkan, balok akan tetap berada di tempat yang sama, pada posisi statisnya.
Sekarang mari kita lihat bagaimana koordinatnya diatur.
Untuk tujuan ini, empat jenis properti digunakan:
1. Atas
2.Kiri
3. Benar
4. Bawah
Atas - nilai positif (misalnya, 20 piksel) memindahkan blok sebesar 20 piksel ke bawah. Nilai negatif (-20 piksel) menaikkan elemen sebesar 20 piksel. Semua ini terjadi relatif terhadap sudut kiri atas.
Kiri - bergeser ke kiri atau kanan, tergantung tandanya. Relatif terhadap sudut kiri atas.
Kanan - bergeser ke kanan dan kiri, tergantung tandanya. Relatif terhadap sudut kanan atas.
Bawah - bergeser ke atas atau ke bawah, tergantung tandanya. Terjadi relatif terhadap sudut kiri bawah.
Berikut kode HTMLnya:
Dan ini CSSnya:
#1 {
posisi:relatif;
atas:100 piksel;
kiri:100 piksel;
lebar:500 piksel;
tinggi:500 piksel;
warna latar:#CCCCCC;
}
#11 {
warna-latar belakang:#003399;
posisi:mutlak;
bawah: -30 piksel;
kanan: -50 piksel;
lebar:100 piksel;
tinggi:100 piksel;
}
#2 {
warna latar belakang:#990066;
lebar:200 piksel;
tinggi:300px
}
Praktik.
Saat saya sedang menulis, saya memikirkannya sendiri.