Cara menyusun elemen dalam css

Jika anda ingin mencipta pengalaman visual yang hebat dan unik di web, anda akhirnya memerlukan dua elemen untuk bertindih atau wujud di tempat yang sama. Anda mungkin hanya memerlukan mereka untuk diposisikan berhampiran atau bersebelahan. Mari kita pergi ke dua cara yang berbeza untuk mencapai ini, satu dengan harta kedudukan dan satu dengan grid CSS.

Kaedah 1: Menggunakan harta kedudukan

Anda mungkin sudah tahu kedudukan itu: mutlak; Akan meletakkan sesuatu yang benar -benar di halaman di mana sahaja anda mahu. Dalam kes ini, kami benar-benar meletakkan anak itu ke bahagian atas halaman. Tidak kira di mana ibu bapa itu, kanak -kanak akan diletakkan di sudut itu, sama sekali.

 . anak {
  …
  Kedudukan: Mutlak;
  Atas: 0;
  Kiri: 0;
} 

Lihat pen
CSS menyusun, mutlak 1 oleh Sarah Drasner (@sdras)
pada codepen.

Tetapi ini sangat rapuh! Bagaimana jika anda meletakkan sesuatu di halaman dan kemudian sesuatu yang lain datang selepas itu? Mungkin anda mempunyai ikon dalam navigasi yang selalu anda inginkan di sudut kiri atas, tetapi pihak ketiga masuk dan dimasukkan ke dalam iklan spanduk. (Saya tidak menganjurkan iklan spanduk, tetapi mereka ada.) Ini menolak navigasi dan sekarang ikon tidak dapat dielakkan.

Atau, katakan anda ingin membuat komponen serba lengkap yang boleh anda gunakan di beberapa tempat. Anda memerlukannya untuk diguna semula dan bekerja dalam konteksnya sendiri, tidak kira di mana anda menggunakannya.

Jika kita meletakkan kedudukan: relatif; pada elemen induk, apa -apa di dalamnya dengan kedudukan: mutlak; akan diletakkan benar -benar, berbanding dengan unit yang mengandungi!

 . anak {
  / * ... */
  Kedudukan: Mutlak;
  Atas: 0;
  Kiri: 0;
}

.paren {
  Kedudukan: Relatif;
} 

Lihat pen
CSS menyusun, mutlak 2 oleh Sarah Drasner (@sdras)
pada codepen.

Bagus.

Kita boleh menggunakan premis yang sama jika kita mahu menyusun dua elemen di atas satu sama lain. Di sini, kami akan mempunyai dua elemen kanak -kanak yang disusun di atas satu sama lain dan dibezakan oleh 150 piksel. Kami akan melihat bahawa mereka kini terkandung dalam ibu bapa yang sama dan tetap berada di dalamnya.

Ibu bapa

Anak 1

Anak 2

 . anak {
  Kedudukan: Mutlak;
  Atas: 0;
}

.Child-1 {
  Kiri: 0;
}

.Child-2 {
  Kiri: 150px;
}

.paren {
  Kedudukan: Relatif;
} 

Lihat pen
CSS menyusun, mutlak 3 oleh Sarah Drasner (@sdras)
pada codepen.

Ini adalah sekolah lama, tetapi saya telah menggunakannya selama bertahun -tahun dan saya masih mencapainya. Ia berfungsi secara konsisten di seluruh pelayar dan dapat membantu anda mencapai penempatan yang paling aneh dan unik.

Kaedah 2: Menggunakan Grid CSS

Satu lagi cara yang baik untuk bertindih elemen, menyusunnya, atau mengubahsuai penempatan mereka adalah grid CSS, bergantung kepada sejauh mana anda perlu menyokong (yang boleh anda periksa dengan Caniuse).

Kita boleh meletakkan sesuatu di mana kita memerlukannya di dalam bekas seperti ini:

 .paren {
  paparan: grid;
  Grid-template-lajur: 250px 1FR;
  Grid-template-baris: 150px 1FR;
}

. anak {
  grid-kawasan: 1/1/2/2;
} 

Lihat pen
CSS menyusun, Grid 1 oleh Sarah Drasner (@Sdras)
pada codepen.

Dan jika satu elemen harus disusun di sisi lain, kita boleh meletakkannya di kawasan grid yang sama. Mari kita juga mengimbangi mereka dengan menggunakan margin.

 .paren {
  paparan: grid;
  Grid-template-lajur: 250px 1FR;
  Grid-template-baris: 150px 1FR;
}

. anak {
  grid-kawasan: 1/1/2/2;
}

.Child-2 {
  Margin-Left: 200px;
} 

Lihat pen
CSS menyusun, Grid 2 oleh Sarah Drasner (@Sdras)
pada codepen.

Jika anda mendapati teknik ini sukar untuk digambarkan, saya telah mencipta penjana grid CSS yang diharapkan dapat melihat perkara dengan lebih jelas.

Terdapat begitu banyak tempat untuk menggunakan teknik ini! Anda boleh menyusun, lapisan dan elemen mengimbangi. Anda boleh membuat navigasi, kaki. Anda boleh membuat hampir apa-apa jenis susun atur di mana anda ingin mempunyai lebih banyak kawalan bijirin tentang bagaimana unsur-unsur diletakkan pada halaman.

Atas ialah kandungan terperinci Cara menyusun elemen dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!