Elemen blok dalam HTML adalah elemen yang secara default menempati seluruh lebar elemen induknya. Elemen induk dapat berupa elemen blok lain, atau jendela browser. Anda dapat mengatur lebar dan tinggi elemen blok menggunakan properti CSS. Memposisikan elemen blok adalah proses memposisikannya di dalam jendela browser dan relatif terhadap elemen tersebut menggunakan properti CSS position , left , top , right dan bottom . Properti posisi CSS dirancang untuk menyetel salah satu dari empat jenis pemosisian yang tersedia: statis (default), absolut, tetap, dan relatif. Properti CSS lainnya, yaitu left , top , right dan bottom , dimaksudkan untuk mengatur jarak relatif terhadap tepi kiri, atas, kanan dan bawah elemen induk. Selain itu, saat mengatur properti tertentu, elemen blok dapat saling tumpang tindih, dan fitur ini juga dapat digunakan di situs web.

Jika Anda tidak menentukan posisi untuk elemen blok atau menentukan static , yang merupakan hal yang sama, maka elemen blok disusun secara berurutan. Apalagi blok berikutnya (misalnya: merah) terletak di baris baru. Selain itu, penentuan posisi ini tidak terpengaruh oleh pengaturan jarak ke kiri, atas, kanan, dan bawah.

Dengan pemosisian absolut, posisi suatu elemen ditentukan relatif terhadap tepi jendela browser menggunakan jarak yang ditentukan oleh properti left , top , right , dan bottom . Jika Anda menentukan jarak left dan right pada saat yang sama, dan keduanya bertentangan satu sama lain, maka preferensi diberikan kepada left , hal yang sama berlaku untuk top dan bottom , yang mana jarak top diutamakan. Pemosisian absolut sangat sering digunakan bersama dengan pemosisian relatif untuk tujuan desain, ketika diperlukan untuk menempatkan berbagai elemen relatif satu sama lain, dapat juga digunakan untuk membuat menu tarik-turun, tata letak situs, dll.

Pemosisian tetap berbeda dari jenis pemosisian lainnya dan tidak berpindah mengikuti konten saat Anda menggulir halaman. Elemen blok dengan posisi tetap ditambatkan menggunakan properti left , top , right , dan bottom ke tepi jendela browser. Pemosisian tetap digunakan untuk membuat antarmuka bingkai (jendela browser dibagi menjadi beberapa area), menu tetap, footer situs tetap, dan blok "permanen" (daftar tautan, tombol sosial, dll.).

Penempatan relatif ditentukan dengan menentukan jarak left , top , right , dan bottom relatif terhadap posisinya saat ini.

Namun, posisi blok ini juga dapat dibuat menggunakan properti margin.

Pemosisian relatif tidak menyenangkan untuk digunakan sendiri, ini sebagian besar digunakan bersama dengan pemosisian absolut.

Mari pertimbangkan opsinya:

Di atas kita berbicara tentang bagaimana Anda dapat memposisikan elemen halaman dengan menggunakan tabel. Tapi ini juga bisa dilakukan dengan menggunakan gaya.

• Di antara parameter gaya terdapat properti khusus untuk penentuan posisi:
• kiri - untuk mengatur jarak dalam piksel dari tepi kiri jendela (koordinat x);
• atas - untuk mengatur jarak dalam piksel dari tepi atas jendela (koordinat y);

z-index - untuk menunjukkan urutan elemen yang akan saling tumpang tindih; ini adalah dimensi baru, elemen dengan indeks z yang lebih besar akan muncul di atas elemen dengan indeks z yang lebih kecil.
Tentu saja, penggunaan ketiga properti ini tidak menciptakan efek ruang tiga dimensi, tetapi ini lebih dari sekadar permukaan datar. Dalam hal ini kita berbicara tentang ruang 2,5 dimensi.

• Selain properti koordinat, kita memerlukan properti posisi, yang, jika dikombinasikan dengan properti kiri dan atas, memungkinkan kita memasang elemen pada posisi tertentu di jendela. Properti position dapat mengambil tiga nilai:
• relatif - elemen akan dipasang sesuai dengan lokasinya dalam teks sumber; nilai ini ditetapkan secara default. Misalnya, jika suatu elemen berjarak tiga baris dari awal pemilihannya dalam teks dokumen, maka secara default properti position diasumsikan relative , dan properti koordinat kiri dan atas diasumsikan nol. Nilai bukan nol pada properti kiri dan atas menentukan pergeseran elemen relatif terhadap posisi aslinya;
• statis - elemen akan ditempatkan pada posisi tertentu relatif terhadap latar belakang dan tidak akan bergerak saat halaman digulir.

Contoh berikut menunjukkan penggunaan properti z-index.

Meskipun dalam teks program gambar dijelaskan di atas elemen lainnya, dengan memberinya indeks dengan angka yang besar, gambar tersebut akan dipindahkan ke atas teks pertama. Dengan demikian, penggunaan properti z-index membebaskan Anda dari belenggu tatanan alami penyebutan elemen dalam teks program HTML.




Penentuan posisi

teks posisi nepBbiu

Beras. 666. Menggunakan properti i-index memungkinkan Anda mengubah urutan alami elemen dalam teks dokumen HTML

• Saat memposisikan elemen, ternyata dimensi elemen melebihi dimensi fragmen (area yang dialokasikan ditentukan dalam contoh kita dengan tag).
• Misalnya, teks atau gambar tidak sepenuhnya sesuai dengan persegi panjang yang dialokasikan untuknya. Untuk kasus ini, ada properti overwlow. Properti overflow dapat memiliki tiga nilai:
• none (tidak ada) - jika elemen melampaui fragmen (ruang yang dialokasikan untuknya), elemen tersebut akan tetap ditampilkan;

klip - bagian elemen yang menonjol di luar batas fragmen akan terpotong;

gulir - gulir akan digunakan.




Contoh berikut menggunakan properti overflow untuk membuat mekanisme pengguliran untuk teks pertama.

Penentuan posisi

teks posisi riepBbiM

Teks posisi kedua

Dengan menggunakan properti pemosisian, Anda dapat dengan mudah membuat efek tiga dimensi untuk label Anda. Idenya adalah untuk menampilkan teks dengan konten yang sama, sedikit bergeser satu sama lain dan diwarnai dengan warna berbeda. Cobalah menulis program yang sesuai sebagai latihan.

Gambar tersebut menunjukkan kira-kira apa yang seharusnya terjadi. Di bawah gambar adalah salah satu kemungkinan versi program yang membuat tulisan "tiga dimensi".

Beras. 668. Contoh pembuatan teks 3D menggunakan CSS

efek 3d
P (keluarga font: "sans-serif"; ukuran font: 96, -warna: merah)
P. highlight (warna: perak)

P. bayangan (warna: merah tua)

Teks volumetrik"

Teks volumetrik

Teks volumetrik

Harap dicatat bahwa metode membuat judul yang efektif ini jauh lebih ekonomis dibandingkan menggunakan file grafik dengan konten serupa.

• Penempatan blok CSS merupakan salah satu tahapan tata letak yang paling penting, karena hal inilah yang mempengaruhi kemampuan beradaptasi situs atau kemungkinan implementasinya di masa depan (jika saat ini tidak diperlukan), dan juga berdampak signifikan pada penskalaan situs lebih lanjut. Tidak jarang “calon desainer layout” membuat layout yang pada akhirnya lebih mudah dibuang daripada diubah, namun di saat yang sama bisa terlihat benar-benar sesuai dengan layout. Situasi ini muncul karena kurangnya pemahaman tentang di mana dan kapan menggunakan jenis positioning ini atau itu. Hari ini kami akan mencoba memahami masalah ini. Jadi, di CSS ada properti position.
• Properti ini dapat mengambil 5 nilai, tetapi kami akan mempertimbangkan 4 nilai utama:
• mutlak
• statis

tetap

Penempatan balok secara mutlak (mutlak)

Untuk kenyamanan, balok-balok itu disorot dengan bingkai multi-warna. Markupnya akan terlihat seperti ini:

XHTML

Relasi ( posisi: relatif; ) .kuning ( posisi: absolut; kanan: 10px; bawah: 10px; )

Dalam contoh ini, kami menggunakan properti kanan dan bawah untuk mengatur offset dari tepi kanan dan bawah. Nilai properti ini setara dengan nilai atas: Tinggi elemen - 10px dan kiri: Lebar elemen - 10px.

Selain itu, pemosisian absolut terkadang digunakan ketika diperlukan untuk “mempengaruhi” satu elemen ke elemen lainnya.

Jenis pemosisian paling umum yang terjadi pada setiap halaman dan biasanya disetel untuk sebagian besar elemen adalah statis, ditulis dalam css sebagai statis. Untuk sebagian besar tag HTML, nilai ini ditentukan secara default, yaitu. jika posisi tidak ditentukan secara eksplisit, nilainya akan statis. Dengan susunan ini, elemen-elemennya berbaris satu di bawah yang lain dan koordinat di jendela setiap elemen bergantung pada elemen terdekat dengan position: static atau position: relative. Properti atas, kiri, kanan, bawah tidak akan berfungsi dengan pemosisian ini; posisinya diubah karena properti margin.

Jenis pemosisian ini sangat mirip dengan pemosisian statis, hanya saja posisi elemen dapat diubah dengan properti atas, kiri, kanan, bawah, dan margin.

Pemosisian tetap mirip dengan penentuan posisi absolut dalam hal bagaimana koordinat ditentukan, tetapi lokasi dihitung bukan relatif terhadap halaman HTML, tetapi relatif terhadap jendela browser, yaitu. dengan properti top: 10px, Anda akan mengatur margin atas menjadi 10px DARI JENDELA BROWSER dan tidak peduli pada tingkat gulir halaman mana Anda berada, elemen ini akan selalu mengikuti layar Anda.

Biasanya digunakan untuk elemen navigasi agar pengguna selalu melihat informasi penting atau link ke halaman menarik.

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.

Saya 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

Statis

Digunakan sebagai lokasi default. Dalam hal ini, browser melihat kode HTML, membaginya menjadi elemen-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.

Mutlak

Dengan 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.

Tetap

Dari 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.

Relatif

Penentuan 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.

18/02/15 21.4K

Jika Anda memotong situs web apa pun yang dibuat berdasarkan html, Anda akan melihat struktur berlapis tertentu. Apalagi tampilannya akan mirip dengan kue lapis. Jika Anda berpikir demikian, kemungkinan besar Anda sudah lama tidak makan. Jadi pertama-tama puaskan rasa lapar Anda, dan kemudian kami akan memberi tahu Anda cara memusatkan lapisan div di situs Anda:

Keuntungan tata letak menggunakan tag

Ada dua jenis utama struktur situs web:

• Datar;
• Memblokir.

Tata letak tabel masih dominan bahkan pada awal mula Internet. Keunggulannya antara lain keakuratan penentuan posisi yang ditentukan. Namun, bagaimanapun juga, ia memiliki kekurangan yang jelas. Yang utama adalah panjang kode dan kecepatan pemuatan yang rendah.

Saat menggunakan tata letak tabel, halaman web tidak akan ditampilkan sampai dimuat sepenuhnya. Sedangkan saat menggunakan blok div, elemen langsung ditampilkan.

Selain kecepatan memuat yang tinggi, konstruksi blok situs web memungkinkan Anda mengurangi jumlah kode html beberapa kali. Termasuk melalui penggunaan kelas CSS.

Namun, tata letak tabel harus digunakan untuk menyusun tampilan data pada halaman. Contoh klasik penggunaannya adalah tampilan tabel.

Konstruksi blok berdasarkan tag disebut juga lapis demi lapis, dan blok itu sendiri disebut lapisan. Ini karena ketika nilai properti tertentu digunakan, nilai tersebut dapat ditumpuk satu sama lain, mirip dengan lapisan di Photoshop.

Alat bantu penentuan posisi

Dalam tata letak blok, lebih baik memposisikan lapisan menggunakan cascading style sheet. Properti CSS utama yang bertanggung jawab atas tata letak adalah float.
Sintaks properti:
mengapung: kiri | benar | tidak ada | mewarisi
Di mana:

• kiri – menyelaraskan elemen ke tepi kiri layar. Aliran di sekitar elemen lainnya terjadi di sebelah kanan;
• kanan – perataan di sebelah kanan, mengalir di sekitar elemen lainnya – di sebelah kiri;
• tidak ada – pembungkusan tidak diperbolehkan;
• mewarisi – mewarisi nilai elemen induk.

Mari kita lihat contoh ringan pemosisian div menggunakan properti ini:

#kiri ( lebar: 200px; tinggi: 100px; float: kiri; latar belakang: rgb(255,51,102); ) #kanan ( lebar: 200px; tinggi: 100px; float: kanan; latar belakang: rgb(0,255,153); ) Blok kiri Blok kanan




Sekarang kita akan mencoba menggunakan properti yang sama untuk memposisikan div ketiga di tengah halaman. Namun sayangnya float tidak memiliki nilai pusat. Dan ketika Anda memberi blok baru nilai perataan ke kanan atau kiri, blok tersebut akan bergeser ke arah yang ditentukan. Oleh karena itu, yang tersisa hanyalah menyetel float: left ke ketiga blok:




Tapi ini juga bukan pilihan terbaik. Ketika ukuran jendela diperkecil, semua lapisan berbaris dalam satu baris secara vertikal, dan ketika ukurannya diperbesar, mereka menempel di tepi kiri jendela. Jadi kita memerlukan cara yang lebih baik untuk memusatkan div. Lapisan tengah

Pada contoh berikutnya, kita akan menggunakan layer container di mana kita akan menempatkan elemen lainnya. Ini memecahkan masalah pergerakan blok relatif satu sama lain ketika ukuran jendela diubah. Memusatkan wadah di tengah dilakukan dengan menyetel properti margin ke nol untuk margin dari tepi atas dan otomatis di samping (margin: 0 auto ):

#container ( lebar: 600px; margin: 0 otomatis; ) #kiri ( lebar: 200px; tinggi: 100px; float: kiri; latar belakang: rgb(255,51,102); ) #kanan ( lebar: 200px; tinggi: 100px; float : kiri; latar belakang: rgb(0,255,153); #center ( lebar: 200px; tinggi: 100px; float: kiri; latar belakang: rgb(255,0,0); ) Blok kiri Blok tengah Blok kanan




Contoh yang sama menunjukkan bagaimana Anda dapat memusatkan div secara horizontal. Dan jika Anda mengedit sedikit kode di atas, Anda dapat mencapai perataan blok secara vertikal. Untuk melakukan ini, Anda hanya perlu mengubah panjang lapisan wadah (menguranginya). Artinya, setelah diedit, kelas cssnya akan terlihat seperti ini:

Setelah perubahan, semua balok akan berbaris rapi di tengah. Dan posisinya tidak akan berubah berapa pun ukuran jendela browser. Berikut tampilan div yang terpusat secara vertikal:




Dalam contoh berikut, kami menggunakan sejumlah properti css baru untuk memusatkan lapisan dalam sebuah wadah:

#container ( lebar: 450px; tinggi:150px; margin:0 otomatis; warna latar:#66CCFF; ) #kiri ( lebar: 100px; tinggi: 100px; latar belakang: rgb(255,51,102); tampilan: blok sebaris; perataan vertikal: tengah; margin-kiri: 35px; ) #kanan ( lebar: 100px; tinggi: 100px; latar belakang: rgb(0,255,153); tampilan: blok sebaris; perataan vertikal: tengah; margin-kiri: 35px; ) #center ( lebar: 100px; tinggi: 100px; latar belakang: rgb(255,0,0); tampilan: blok-sebaris; perataan vertikal: tengah; margin-kiri: 35px; )




Deskripsi singkat tentang properti css dan nilainya yang kami gunakan dalam contoh ini untuk memusatkan div di dalam div:
• display: inline-block – menyelaraskan elemen blok menjadi satu garis dan memastikannya membungkus elemen lain;
• vertical-align: middle – menyelaraskan elemen di tengah dengan induknya;
• margin-left – mengatur margin kiri.
Cara membuat tautan dari sebuah lapisan

Meski terdengar aneh, hal ini mungkin saja terjadi. Terkadang blok div sebagai tautan mungkin diperlukan saat menata berbagai jenis menu. Mari kita lihat contoh praktis penerapan lapisan tautan:

#layer1( lebar: 500px; tinggi: 100px; latar belakang: rgb(51,255,204); perbatasan:alur; ) a ( tampilan: blok; perataan teks: tengah; tinggi: 100%; warna: rgb(255,0,51) ; ) Tautan ke situs web kami




Dalam contoh ini, dengan menggunakan baris display: block, kita menyetel tautan ke nilai elemen blok. Dan agar seluruh tinggi blok div menjadi link, atur height : 100%. Menyembunyikan dan menampilkan elemen blok

Elemen blok memberikan lebih banyak peluang untuk memperluas fungsionalitas antarmuka daripada tata letak tabel yang sudah ketinggalan zaman. Seringkali desain website unik dan mudah dikenali. Tetapi untuk hal eksklusif seperti itu Anda harus membayar dengan kurangnya ruang kosong.

Hal ini terutama berlaku untuk halaman utama, yang biaya iklannya paling tinggi. Oleh karena itu, timbul masalah di mana harus “mendorong” spanduk iklan lainnya. Dan di sini Anda tidak bisa lagi menyelaraskan div ke tengah halaman!

Solusi yang lebih rasional adalah dengan menyembunyikan beberapa blok. Berikut ini contoh sederhana penerapannya:

#layer1( tampilan:blok; lebar: 500px; tinggi: 100px; latar belakang: rgb(51,255,204); perbatasan:alur; ) fungsi show() ( if(layer1=="none") ( layer1="block"; ) else ( layer1="tidak ada"; ) dokumen.getElementById("layer1").style.display=layer1 )

Ini adalah tombol ajaib. Mengkliknya akan menyembunyikan atau menampilkan blok persembunyian.