Terdapat empat kaedah untuk kedudukan elemen CSS: kedudukan statik, relatif, mutlak dan tetap. Kedudukan statik adalah lalai dan elemen tidak dipengaruhi oleh peraturan kedudukan. Kedudukan relatif menggerakkan elemen relatif kepada dirinya sendiri tanpa menjejaskan aliran dokumen. Kedudukan mutlak mengalih keluar elemen daripada aliran dokumen dan meletakkannya secara relatif kepada unsur nenek moyangnya. Kedudukan tetap meletakkan elemen berbanding dengan port pandangan, sentiasa mengekalkannya dalam kedudukan yang sama pada skrin.
Kaedah penentududukan elemen CSS
Kedudukan elemen dalam CSS membolehkan pembangun meletakkan elemen dalam dokumen dengan tepat mengikut peraturan tertentu. Terdapat empat kaedah penentududukan utama:
1 Kedudukan statik (statik)
Ini ialah kaedah penentududukan lalai, dan asal unsur berada di sudut kiri atasnya sendiri. Elemen tidak dipengaruhi oleh mana-mana peraturan kedudukan melainkan dinyatakan secara eksplisit.
2. Kedudukan relatif (relatif)
Menggerakkan elemen secara relatif kepada elemen itu sendiri. Menyediakan peraturan position: relative
mengalihkan elemen pada jarak tertentu berbanding dengan asalnya tanpa menjejaskan kedudukan elemen lain dalam aliran dokumen. position: relative
规则,则元素相对于其原点移动指定距离,而不会影响文档流中其他元素的位置。
3. 绝对定位 (absolute)
将其元素完全从文档流中移除并相对于其最近的定位祖先定位。元素的位置由 top
, right
, bottom
和 left
3. Kedudukan mutlak (mutlak)
mengalih keluar sepenuhnya elemennya daripada aliran dokumen dan meletakkannya secara relatif kepada nenek moyang kedudukannya yang terdekat. Kedudukan elemen ditakrifkan oleh atributatas
, kanan
, bawah
dan kiri
, berbanding dengan piksel daripada unsur nenek moyang yang ditentukan.
4. Kedudukan tetap (tetap)
adalah serupa dengan kedudukan mutlak, tetapi meletakkan elemen berbanding dengan port pandangan berbanding nenek moyangnya. Elemen sentiasa berada dalam kedudukan yang sama pada skrin dan tidak bergerak walaupun apabila halaman menatal.Atas ialah kandungan terperinci Bagaimana untuk meletakkan elemen dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!