Kemas kini terakhir: 28/04/2016

CSS menyediakan keupayaan kedudukan elemen, bermakna kita boleh meletakkan elemen pada lokasi tertentu pada halaman.

Sifat utama yang mengawal kedudukan dalam CSS ialah sifat kedudukan. Harta ini boleh mengambil salah satu daripada nilai berikut:

statik : kedudukan elemen standard, nilai lalai

mutlak : elemen diletakkan secara relatif kepada sempadan elemen bekas jika sifat kedudukannya tidak statik

relative : Elemen diposisikan relatif kepada kedudukan lalainya. Lazimnya, tujuan utama penentududukan relatif bukanlah untuk menggerakkan elemen, tetapi untuk mewujudkan titik utama baharu untuk kedudukan mutlak elemen bersarangnya.

tetap : elemen diletakkan relatif kepada tetingkap penyemak imbas, ini membolehkan anda mencipta elemen tetap yang tidak mengubah kedudukan apabila ditatal

Anda tidak seharusnya menggunakan sifat apungan dan sebarang jenis kedudukan selain statik (iaitu jenis lalai) pada elemen secara serentak.

Kedudukan mutlak

Kawasan tontonan penyemak imbas mempunyai tepi atas, bawah, kanan dan kiri. Setiap satu daripada empat tepi ini mempunyai sifat CSS yang sepadan: kiri, kanan, atas dan bawah. Nilai untuk sifat ini dinyatakan dalam piksel, ems atau peratusan. Ia tidak perlu untuk menetapkan nilai untuk keempat-empat sisi. Sebagai peraturan, hanya dua nilai ditetapkan - inden dari tepi atas atas dan inden dari tepi kiri kiri.

HAI DUNIA

Di sini div kedudukan mutlak ialah 100 piksel di sebelah kiri sempadan port pandangan dan 50 piksel dari bawah.

Ia tidak begitu penting bahawa selepas elemen div ini terdapat beberapa elemen lain. Blok div ini dalam apa jua keadaan akan diletakkan secara relatif kepada sempadan port pandangan penyemak imbas.

Jika elemen dengan kedudukan mutlak terletak di dalam bekas lain, yang, seterusnya, mempunyai nilai sifat kedudukan yang tidak sama dengan statik , maka elemen tersebut diposisikan secara relatif kepada sempadan bekas:

Kedudukan relatif

Kedudukan relatif juga ditentukan menggunakan nilai relatif. Untuk menentukan kedudukan khusus yang mana elemen dialihkan, sifat atas, kiri, kanan, bawah yang sama digunakan:

harta indeks z

Secara lalai, apabila dua elemen mempunyai sempadan yang sama, elemen yang terakhir ditakrifkan dalam penanda html dipaparkan di atas yang lain. Walau bagaimanapun, sifat z-index membolehkan anda menukar susunan elemen apabila ia ditindih. Harta itu mengambil nombor sebagai nilainya. Elemen dengan nilai indeks z yang lebih besar akan muncul di atas elemen dengan nilai indeks z yang lebih kecil.

Sebagai contoh:

Sekarang mari tambah peraturan baharu pada gaya blok redBlock:

RedBlock( z-indeks: 100; kedudukan: mutlak; atas: 20px; kiri: 50px; lebar: 80px; tinggi: 80px; warna latar belakang: merah; )

Di sini indeks-z ialah 100. Tetapi ia tidak semestinya nombor 100. Memandangkan blok kedua mempunyai indeks-z yang tidak ditentukan dan sebenarnya sifar, untuk redBlock kita boleh menetapkan sifat indeks-z kepada sebarang nilai yang lebih besar daripada sifar.

Dan kini blok pertama akan bertindih dengan yang kedua, dan bukan sebaliknya, seperti yang berlaku pada mulanya.

Kini, pembangun web boleh membina susun atur halaman web yang kompleks menggunakan pelbagai teknik CSS. Beberapa teknik ini mempunyai sejarah yang panjang (terapung), yang lain (flexbox) telah mendapat populariti dalam beberapa tahun kebelakangan ini.

Dalam artikel ini, kita akan melihat dengan lebih dekat beberapa perkara yang kurang diketahui tentang kedudukan CSS.

Sebelum kita mula, mari kita semak secara ringkas asas-asas pelbagai jenis kedudukan.

Gambaran keseluruhan kaedah penentududukan yang tersedia

Sifat kedudukan CSS menentukan jenis kedudukan sesuatu elemen.

Pilihan Kedudukan

statik ialah nilai sifat penentududukan lalai. Kami menasihatkan bahawa elemen ini tidak menggunakan penentududukan - penentududukan hanya digunakan jika anda menentukan jenis kedudukan selain daripada lalai.

Untuk melakukan ini, anda perlu menetapkan sifat kedudukan kepada salah satu nilai berikut:

• relatif
• mutlak
• tetap
• melekit

Dan hanya selepas menetapkan kedudukan, anda boleh menggunakan sifat yang mengimbangi elemen:

• betul
• bawah
• Nilai awal sifat ini ialah kata kunci auto.

Ia harus diambil kira bahawa jika sesuatu elemen mempunyai sifat kedudukannya ditetapkan kepada mutlak atau tetap , maka ia adalah elemen berkedudukan mutlak. Juga, sifat z-index mula berfungsi untuk elemen yang diposisikan, yang menentukan susunan susunan.

Perbezaan antara kaedah penentududukan utama

Sekarang mari kita lihat dengan cepat tiga perbezaan asas antara jenis kedudukan yang tersedia:

• elemen kedudukan mutlak (mutlak) dikeluarkan sepenuhnya dari aliran, tempat mereka diambil oleh jiran terdekat mereka.
• kedudukan yang agak (relatif) dan terpaku (melekit) mengekalkan tempat mereka dalam aliran dan jiran terdekat mereka tidak mendudukinya. Walau bagaimanapun, pelapik elemen ini tidak mengambil ruang, tetapi diabaikan sepenuhnya oleh elemen lain dan ini mungkin mengakibatkan elemen bertindih.
• elemen tetap (dan kedudukan tetap ialah sejenis mutlak) sentiasa diposisikan relatif kepada kawasan keterlihatan (mengabaikan kehadiran kedudukan dalam nenek moyang), manakala unsur melekit diposisikan relatif kepada nenek moyang terdekat dengan menatal (limpahan: auto). Dan hanya dengan ketiadaan nenek moyang sedemikian kedudukan mereka berbanding zon penglihatan.

Anda boleh melihat ini dengan lebih terperinci dalam demo:

Nota: Kedudukan elemen melekit masih merupakan teknologi percubaan dengan sokongan terhad dalam penyemak imbas. Sudah tentu, jika anda mahu, anda boleh menggunakan polyfill untuk menambah fungsi ini pada penyemak imbas, tetapi memandangkan kelazimannya yang rendah, sifat ini tidak akan dibincangkan dalam artikel.

Elemen penentududukan dengan jenis penentududukan mutlak

Saya pasti kebanyakan orang tahu cara kedudukan mutlak berfungsi. Walau bagaimanapun, banyak perkara mengenainya mungkin mengelirukan pemula.

Oleh itu, saya memutuskan untuk memulakannya apabila menerangkan ciri kedudukan yang kurang diketahui.

Jadi, elemen yang diposisikan secara mutlak diimbangi secara relatif kepada nenek moyang kedudukan terdekatnya. Sudah tentu, ini berfungsi jika mana-mana nenek moyang mempunyai kedudukan selain statik - jika elemen itu tidak mempunyai nenek moyang yang diposisikan, ia diimbangi berbanding dengan kawasan keterlihatan.

Ini ditunjukkan oleh contoh berikut:

Dalam demo ini, blok hijau pada mulanya diletakkan secara mutlak dengan sifar padding bottom:0 dan left:0 , moyangnya (blok merah) tidak diletakkan sama sekali.

Walau bagaimanapun, kami telah meletakkan pembalut luar secara relatif (elemen dengan jumbotron kelas). Perhatikan bagaimana kedudukan blok hijau berubah apabila jenis kedudukan nenek moyangnya berubah.

Elemen yang diletakkan secara mutlak mengabaikan sifat apungan

Jika kita menggunakan kedudukan mutlak atau tetap pada elemen terapung, sifat terapung akan ditetapkan kepada tiada . Sebaliknya, jika kita menetapkan kedudukan relatif, elemen akan kekal terapung.

Lihat demo yang sepadan:

Dalam contoh ini, kami mentakrifkan dua elemen berbeza yang terapung ke kanan. Ambil perhatian bahawa apabila blok merah diposisikan secara mutlak, ia mengabaikan nilai sifat terapung, manakala blok hijau yang agak berkedudukan mengekalkan nilai apungan.

Elemen sebaris yang diletakkan secara mutlak menjadi elemen blok

Elemen sebaris dengan kedudukan mutlak atau tetap mengambil sifat elemen blok. Penukaran elemen sebaris kepada elemen menyekat diterangkan dengan lebih terperinci dalam jadual.

Dalam kes ini, kami mencipta dua elemen berbeza. Yang pertama (blok hijau) ialah elemen blok, dan yang kedua (blok merah) ialah elemen sebaris. Pada mulanya, hanya blok hijau yang kelihatan.

Kotak merah tidak kelihatan kerana sifat lebar dan ketinggiannya hanya berfungsi dengan elemen blok dan blok sebaris, dan kerana ia tidak mempunyai kandungan, ia tidak mempunyai sebarang dimensi.

Apabila anda menetapkan kedudukan mutlak atau tetap kepada blok merah, ia menjadi blok blok dan saiz blok yang dinyatakan di dalamnya mula berkuat kuasa.

Elemen yang diletakkan secara mutlak tidak mempunyai keruntuhan padding

Secara lalai, apabila dua jidar menegak bersentuhan, ia digabungkan menjadi satu sama dengan maksimum jidar itu. Ini dipanggil keruntuhan margin.

Tingkah laku elemen yang diposisikan secara mutlak di sini adalah serupa dengan elemen terapung - padding mereka tidak digabungkan dengan jirannya.

Dalam demo ini, elemen diberikan padding sebanyak 20 piksel. Pelapiknya runtuh dengan pelapik elemen induk, yang juga 20 piksel. Seperti yang anda lihat, hanya dengan kedudukan mutlak tiada keruntuhan.

Tetapi bagaimana kita boleh menghalang margin daripada runtuh? Kita perlu meletakkan beberapa jenis pemisah di antara mereka.

Ini boleh menjadi pelapik atau jidar, dan boleh digunakan pada kedua-dua elemen induk dan anak. Pilihan lain ialah menambah pembetulan jelas pada elemen induk.

Meletakkan elemen dengan piksel dan peratusan

Pernahkah anda menggunakan peratusan dan bukannya piksel untuk meletakkan elemen? Jika jawapannya ya, maka anda tahu bahawa offset sesuatu elemen bergantung pada unit yang dipilih (piksel atau peratusan).

Ia agak mengelirukan, bukan? Jadi mula-mula mari kita lihat apa yang dinyatakan oleh spesifikasi tentang peratusan mengimbangi:

Offset sebagai peratusan lebar (untuk kiri dan kanan) atau ketinggian (atas atau bawah) blok induk. Untuk elemen terpaku, ofset dikira sebagai peratusan lebar (untuk kiri dan kanan) atau ketinggian (atas atau bawah) aliran. Nilai negatif boleh diterima.

Seperti yang dinyatakan, apabila anda menetapkan offset sebagai peratusan, kedudukan elemen bergantung pada lebar dan ketinggian induknya.

Demo menunjukkan perbezaan ini:

Contoh ini menggunakan piksel dan peratusan untuk mengimbangi. Sudah tentu, apabila anda menentukan offset dalam piksel, elemen itu dialihkan ke tempat yang diperlukan.

Dan jika kita memilih peratusan untuk offset, hasilnya akan bergantung pada saiz elemen induk. Berikut ialah visualisasi yang menunjukkan cara kedudukan baharu dikira:

Nota: Seperti yang anda mungkin tahu, sifat transformasi (bersama-sama dengan pelbagai fungsi terjemahan) juga membolehkan anda menukar kedudukan elemen. Tetapi dalam kes ini, apabila menggunakan peratusan, pengiraan akan berdasarkan saiz elemen itu sendiri, dan bukan induknya.

Kesimpulan

Saya harap artikel ini telah membantu anda lebih memahami kedudukan dalam CSS dan menjelaskan beberapa cabaran.

Ia perlu untuk bergerak (seret, pusingkan, dll.) 3 blok asas 300x600x2400 sekurang-kurangnya 3-5 meter. Masalahnya ialah mereka terletak di belakang rumah dan tiada akses untuk kren atau peralatan khas lain.
Kemudian saya ingin menggunakan blok untuk membina beranda. Tetapi sekarang saya hanya perlu mengosongkan ruang di mana mereka berbaring - saya merancang gazebo di sana.
Berat setiap satu (jika saya mengira dengan betul) adalah kira-kira 1 tan. Sebarang pemikiran tentang ini?

Ya, ia tidak mudah, tetapi ia boleh dilakukan. Bapa mertua saya dan saya mengambil bicu kereta biasa dan beberapa, nampaknya, paip dua inci dan linggis. Tiga blok kami juga terletak di tempat yang menyusahkan, kami mengalihkannya kira-kira 15 meter. Kami melakukan ini: Di ​​bawah pinggir blok (ia terletak di sisinya, iaitu di tepi terluasnya) kami menggali lubang, cukup dalam untuk bicu dan tangan untuk melalui, jadi itu adalah untuk mengepam tuilnya. Sekeping kecil papan rata diletakkan di bahagian bawah lubang supaya tidak mengotorkan bicu dan supaya ia tidak menggali ke dalam tanah di bawah beban. Seterusnya, mereka mengangkat blok dengan agak sopan dari satu tepi, menolaknya dari bawah dengan bicu. Saya tidak tahu dengan tepat pada sudut mana, berbanding dengan tanah, tetapi supaya beberapa kepingan paip setengah meter boleh diletakkan sama rata di bawah blok. Kemudian bicu diturunkan dan blok itu diletakkan pada paip dan diratakan berbanding dengan permukaan bumi. Seterusnya, palang telah dimasukkan ke dalam bahagian paip terpanjang (~1.8 m), yang tidak diletakkan di bawah blok (untuk ketegaran) dan hibrid ini digunakan sebagai tuil, memacunya di bawah hujung blok yang satu lagi dan mengangkatnya berbanding dengan tanah (meningkatkan sudut antara tuil dan tanah ) menolak blok itu seolah-olah menjauhi diri mereka sendiri. Prinsip menggerakkan blok piramid Mesir. Hanya daripada kayu balak, paip digunakan sebagai penggelek. Jika tanahnya cair, anda boleh terlebih dahulu, sebelum menurunkan bicu, letakkan papan panjang rata di bawah paip supaya berat blok tidak menimbus paip. Kami menolak, tidak lupa untuk meletakkan paip baru di bawah "haluan" blok, dan menyediakan paip yang dilepaskan dari bawah "stern" sebagai yang seterusnya di bawah haluan.
Secara keseluruhan, kami melancarkan blok ini selama 3 tahun setiap musim panas sehingga kami melancarkannya ke pintu pagar. Semua orang berfikir tentang cara menggunakannya, tetapi tidak pernah memikirkannya. Kami mengarahkan manipulator, dia memuatkannya ke dirinya sendiri tepat di pintu pagar dan membawa mereka keluar ke arah yang tidak diketahui, dengan bayaran
Kesukaran timbul secara bergilir-gilir jika ada, tetapi semuanya juga mungkin jika anda memukul paip di bawah blok dengan tukul besi, memberi mereka arah dan menyesuaikan kedudukan blok dengan tuil dari sisi. Ia kelihatan berat, tetapi kemudian anda terbiasa dengannya.

P.S. Win yang kami beli khusus untuk blok ini banyak membantu. Cangkuk win boleh dicantumkan pada tiang pagar (yang kami tahan dengan baik) dan win boleh digunakan untuk menyeret blok melalui paip ke tiang ini. Blok harus mempunyai 2 lug yang diperbuat daripada tetulang, jadi win disambungkan padanya. Ini lebih mudah daripada menolak dengan tuil, tetapi ia mengambil masa yang lebih lama dan juga memerlukan banyak usaha - sepanjang masa anda perlu berlari-lari untuk menyambung semula win ke tiang seterusnya.

P.P.S. Menjelaskan sebaik mungkin. Jika ada - maaf.

Apabila meletakkan kedudukan saudara blok, anda perlu menetapkan harta itu jawatan: saudara dan sifat anjakan. Anjakan dalam kes ini tidak akan berlaku secara relatif kepada elemen "induk" (seperti dengan kedudukan mutlak), tetapi relatif kepada blok itu sendiri dalam aliran biasa. Ini akan menjadi lebih jelas dengan contoh. Katakan kita mempunyai halaman HTML dengan tiga div:

Kedudukan relatif

Mari kita tetapkan saiz dan sempadan blok ini dalam helaian gaya:

#blok1, #blok2, #blok3 ( sempadan:1px merah pepejal; lebar:150px; tinggi:50px; )

Sekarang halaman kami dalam penyemak imbas kelihatan seperti ini:

Sekarang mari kita ubah kedudukan blok kedua dengan menambahkan peraturan pada halaman gaya:

#blok1, #blok2, #blok3 ( sempadan:1px merah pepejal; lebar:150px; tinggi:50px; ) #blok2( kedudukan:relatif; kiri:50px; atas:25px; )

Sekarang halaman kami kelihatan seperti ini:

Blok kedua kami telah bergerak ke bawah dan ke kanan berbanding dengan tempat ia berada dalam aliran biasa. Blok yang tinggal kekal di tempat mereka. Dalam amalan, kedudukan relatif digunakan agak jarang, jadi kami tidak akan memberi perhatian lagi kepadanya dan akan mempertimbangkan blok terapung.

Bongkah terapung

Blok ini tidak boleh diletakkan dengan ketepatan piksel, seperti dalam skema sebelumnya, tetapi skema kedudukan ini sangat biasa. Jarang sekali tapak web bertahan tanpa bongkah terapung, dan adalah mustahil untuk membuat susun atur tapak web "cecair" tanpanya.

Sekatan sedemikian boleh bergerak bebas di sekeliling halaman; imej dalam HTML berkelakuan dengan cara yang sama, diselaraskan menggunakan parameter selaraskan.

Blok terapung ditakrifkan oleh harta terapung, yang menentukan sama ada blok akan terapung dan ke arah mana ia akan bergerak. Terdapat tiga pilihan:

• dibiarkan- blok ditekan ke tepi kiri, unsur-unsur yang tinggal mengalir di sekelilingnya di sebelah kanan.


• betul- blok ditekan ke tepi kanan, elemen yang tinggal mengalir di sekelilingnya di sebelah kiri.


• tiada- blok tidak bergerak dan diletakkan mengikut harta kedudukan.

Mari kita lihat contoh. Katakan kita mempunyai halaman HTML dengan kod berikut:

Kedudukan blok

Teks blok 1

Dan halaman style.css dengan kod berikut:

#blok1( sempadan:1px merah pepejal; lebar:150px; tinggi:50px; )

Sekarang halaman kami dalam penyemak imbas kelihatan seperti ini:

Mari buat blok kita terapung dan tolaknya ke tepi kiri:

#blok1( sempadan:1px merah pepejal; lebar:150px; tinggi:50px; terapung: kiri; )

Sekarang mari kita tolak blok ke tepi kanan:

#blok1( sempadan:1px merah pepejal; lebar:150px; tinggi:50px; terapung:kanan; )

Sekarang halaman kami dalam penyemak imbas kelihatan seperti ini:

Apakah yang berlaku jika terdapat beberapa blok terapung pada halaman? Mari tambah blok lain ke halaman html kami:

Kedudukan blok

Teks blok 1

Sekat teks 2

Hanya beberapa elemen pada halaman. Ia boleh hanya teks, pautan, senarai, gambar, dsb.

Dan berikan mereka nilai harta yang berbeza terapung:

#blok1( sempadan:1px merah pepejal; lebar:150px; tinggi:50px; terapung:kiri; ) #blok2( sempadan:1px merah pepejal; lebar:150px; tinggi:50px; apungan:kanan; )

Sekarang halaman kami dalam penyemak imbas kelihatan seperti ini:

Bagaimana jika mereka mempunyai nilai yang sama? Sebagai contoh:

#blok1( sempadan:1px merah pepejal; lebar:150px; tinggi:50px; terapung:kiri; ) #blok2( sempadan:1px merah pepejal; lebar:150px; tinggi:50px; terapung: kiri; )

Kemudian blok kedua akan ditekan pada tepi kanan blok pertama:

Keadaan akan serupa untuk nilai yang sama betul:

#blok1( sempadan:1px merah pepejal; lebar:150px; tinggi:50px; terapung:kanan; ) #blok2( sempadan:1px merah pepejal; lebar:150px; tinggi:50px; apungan:kanan; )

Sila ambil perhatian: blok pertama 1 akan ditekan ke tepi kanan, dan kemudian blok 2 akan ditekan kepadanya.

Tetapi bagaimana jika kita mahu blok ditekan ke tepi kanan, tetapi terletak satu di bawah yang lain. Terdapat harta untuk ini jelas, yang menentukan sisi blok terapung yang tidak boleh bersebelahan dengan blok terapung lain. Sifat ini boleh mempunyai satu daripada empat nilai:

• dibiarkan- blok harus terletak di bawah semua blok sebelah kiri.


• betul- blok mesti terletak di bawah semua blok sebelah kanan.


• kedua-duanya- blok mesti terletak di bawah semua blok terapung.


• tiada- tiada sekatan, ini adalah nilai lalai.

Mari tetapkan sifat ini untuk blok kedua dalam contoh terakhir kami:

#blok1( sempadan:1px merah pepejal; lebar:150px; tinggi:50px; float:kanan; ) #blok2( sempadan:1px merah pepejal; lebar:150px; tinggi:50px; float:kanan; jelas:kanan; )

Kini ternyata seperti yang saya mahu: satu blok di bawah yang lain:

Dalam pelajaran sebelumnya, kami mencipta halaman seperti ini menggunakan kedudukan mutlak:

Mari lihat bagaimana ia boleh dilakukan menggunakan bongkah terapung. Jadi, kod untuk halaman itu sendiri adalah seperti berikut:

Kedudukan blok

pengepala tapak

Kandungan

blok berita

bahagian bawah tapak

Pada halaman style.css, mari kita tetapkan dimensi dan latar belakang untuk blok kita dahulu:

#header( background:darkred; width:715px; height:100px; ) #menu( background:oldlace; width:190px; height:300px; ) #content( background:oldlace; width:525px; height:300px; ) #footer ( background:darkred; width:715px; height:30px; ) #news( background:yellow; width:150px; height:280px; )

Sekarang blok kami terletak dalam aliran biasa, i.e. satu di bawah yang lain. Kita perlu membuat blok menu Dan kandungan terapung dan kidal. Satu blok berita harus menekan pada tepi kanan, i.e. Kami akan menjadikannya blok terapung tangan kanan:

#header( background:darkred; width:715px; height:100px; ) #menu(background:oldlace; width:190px; height:300px; float:left; ) #content(background:oldlace; width:525px; height:300px ; float:left; ) #footer( background:darkred; width:715px; height:30px; ) #news(background:kuning; width:150px; height:280px; float:right; )

Halaman kami dalam penyemak imbas kelihatan seperti ini:

Mari lihat blok berita kami, anda boleh melihat bahawa ia terletak di bawah teks dalam blok kandungan. Tetapi kami mahu blok berita berada di sebelah kanan, dan teks akan mengalir di sekelilingnya di sebelah kiri.

Mengapa ia tidak berjaya untuk kita? Kerana blok kami berita dalam kod html terletak di bawah teks dan hanya teks yang terletak di bawahnya akan mengalir di sekelilingnya. Untuk membetulkannya, kita perlu meletakkan kita div="berita" di atas teks (iaitu sebelum perkataan "kandungan"):

Kedudukan blok

pengepala tapak

blok berita

Kandungan

bahagian bawah tapak

Kini blok berita kami berada di tempatnya:

Dan supaya ia tidak menekan dekat dengan tepi atas dan kanan, kami akan menambah nilai margin untuk blok ini:

#news(latar belakang:kuning; lebar:150px; tinggi:280px; float:kanan; jidar:10px; )

Kini kami telah mencapai keputusan yang sama seperti dengan kedudukan mutlak.

Setuju bahawa menggunakan blok terapung adalah lebih mudah untuk menyusun halaman: anda tidak perlu mengira piksel dan kodnya lebih pendek. Di samping itu, dengan susun atur "cecair", kami tidak dapat menentukan lokasi tepat blok pada skrin, dan dengan bantuan blok terapung kami tidak memerlukan ini, sudah cukup untuk menunjukkan hanya tanda tempat (di sebelah kiri, di sebelah kanan, di bawah atau dalam baris yang sama).

Blok tetap

Seperti yang anda ingat, dengan kedudukan tetap, blok ditetapkan relatif kepada kawasan tontonan. Dalam beberapa cara, blok tetap adalah serupa dengan bingkai. Penatalan tersedia hanya di dalam bingkai, tetapi tidak di dalam blok.

Blok tetap mempunyai satu kelemahan yang ketara: ia tidak disokong oleh pelayar Internet Explorer. Oleh itu, mereka tidak sepatutnya digunakan buat masa ini. Oleh itu, di sini kami hanya akan menunjukkan sintaks peraturan sedemikian, jika anda ingin mencuba sendiri (contohnya, dalam penyemak imbas Opera).

#blok( position:fixed; left:0px; top:0px; )

Blok dengan pengecam "blok" akan kekal pada tempatnya apabila menatal halaman.

Itu sahaja untuk hari ini. Dalam pelajaran seterusnya kita akan berkenalan dengan beberapa lagi sifat blok dan jenisnya.

Mereka berfungsi dengan semua elemen kedudukan kecuali yang statik.

Contoh kedudukan.

Elemen boleh bertindih antara satu sama lain!

Memaparkan elemen di atas yang lain!

Sifat kedudukan mempunyai 4 nilai: statik, tetap, relatif dan mutlak. Setiap makna ini akan ditunjukkan di bawah dengan contoh penggunaan.

Sebelum kita meneliti secara terperinci semua jenis kedudukan elemen pada halaman, kita perlu mempertimbangkan apakah aliran dokumen.

Aliran dokumen

Secara lalai, elemen pada halaman web dipaparkan dalam susunan ia muncul dalam dokumen HTML, iaitu, elemen blok menduduki lebar penuh yang tersedia untuk mereka dan disusun secara menegak satu di bawah yang lain. Elemen sebaris dibarisi secara mendatar sehingga keseluruhan lebar yang tersedia diduduki, selepas keseluruhan lebar diduduki, pemisah baris dibuat dan semuanya bermula semula. Susunan unsur ini dipanggil aliran biasa(juga dipanggil aliran dokumen atau aliran umum).

Anda boleh menggunakan sifat apungan atau kedudukan untuk mengalih keluar elemen daripada aliran biasa. Jika elemen "keluar" daripada aliran biasa, maka elemen yang terletak dalam kod di bawah elemen itu akan dialihkan ke tempatnya pada halaman web.

Kedudukan statik

Statik ialah kedudukan lalai untuk semua elemen pada halaman web. Jika anda tidak menggunakan sifat kedudukan pada elemen, ia akan menjadi statik dan akan muncul pada halaman web mengikut aliran umum elemen.

Apabila menggunakan sifat CSS atas , kiri , kanan atau bawah pada elemen yang diletakkan secara statik, ia akan diabaikan.

Jika perlu, anda boleh menetapkan kedudukan statik dalam helaian gaya menggunakan nilai statik:

Perenggan pertama.

Perenggan kedua.

Cuba »

Kedudukan tetap

Elemen dengan kedudukan tetap terletak pada halaman berbanding tetingkap penyemak imbas. Elemen sedemikian dialih keluar daripada aliran umum; elemen yang mengikuti elemen tetap dalam aliran akan mengabaikannya, bergerak dan mengambil tempatnya pada halaman web.

Perlu diberi perhatian bahawa elemen dengan kedudukan tetap boleh bertindih dengan elemen lain, menyembunyikannya sepenuhnya atau sebahagiannya. Apabila menatal melalui halaman yang panjang, mereka mencipta kesan objek tidak bergerak yang tinggal di tempat yang sama:

Teks Teks Teks Teks Teks Teks Teks Teks Beberapa teks Teks Teks Teks Teks Teks Teks

Cuba »

Kedudukan relatif

Elemen dengan kedudukan relatif, seperti elemen statik, kekal dalam aliran umum. Apabila anda menggunakan sifat atas, kiri, kanan atau bawah pada unsur yang agak kedudukannya, ia akan bergerak secara relatif kepada lokasinya, meninggalkan ruang kosong di mana unsur tersebut berada pada asalnya.

Unsur-unsur tersebut tidak menjejaskan kedudukan unsur-unsur yang mengelilinginya; unsur-unsur yang selebihnya kekal pada tempatnya dan boleh ditindih oleh unsur yang agak kedudukannya:

Tajuk peringkat pertama.

Tajuk yang agak berkedudukan.

Tajuk peringkat ketiga.

Cuba »

Nota: Unsur relatif biasanya digunakan sebagai induk untuk unsur mutlak.

Kedudukan mutlak

Elemen yang diposisikan secara mutlak dikeluarkan sepenuhnya daripada aliran keseluruhan, elemen yang selebihnya akan mengambil ruang kosong, mengabaikan elemen yang diposisikan secara mutlak. Anda kemudiannya boleh meletakkan elemen di mana-mana yang anda mahu pada halaman web menggunakan sifat atas, kiri, kanan atau bawah.

Semua elemen kedudukan mutlak diletakkan relatif kepada tetingkap penyemak imbas atau relatif kepada nenek moyang kedudukan terdekat (jika ada) yang mempunyai sifat kedudukan mutlak , tetap atau relatif .

Mari tukar lokasi logo menggunakan kedudukan mutlak.
Logo kini akan terletak di sudut kanan atas halaman.

Cuba »

Elemen bertindih

Apabila elemen berada di luar aliran keseluruhan halaman, ia boleh bertindih antara satu sama lain. Biasanya, susunan elemen sepadan dengan susunannya dalam kod HTML halaman, bagaimanapun, adalah mungkin untuk mengawal susunan pertindihan menggunakan sifat CSS z-index , semakin tinggi nilainya, semakin tinggi elemen tersebut.