Kedudukan elemen HTML memainkan peranan penting dalam menyusun komponen halaman web. Lebih khusus lagi, kedudukan elemen boleh diselaraskan dengan menggunakan CSS “ kedudukan ” harta benda. Sifat ini boleh dikaitkan dengan sifat mengimbangi, seperti sifat atas, kiri, kanan dan bawah, memberikan nilai khusus untuk melaraskan elemen pada halaman. Walau bagaimanapun ' mutlak ” elemen kedudukan boleh dilaraskan relatif kepada elemen kedudukan terdekat.
Siaran ini akan menerangkan kedudukan mutlak CSS.
Harta 'kedudukan' CSS
' kedudukan ” harta dalam CSS boleh digunakan untuk melaraskan kedudukan elemen. Nilai yang berbeza bagi sifat kedudukan adalah tetap, mutlak, relatif, statik dan melekit. Nilai ini ditetapkan dengan sifat offset, seperti atas, kanan, kiri dan bawah, untuk melaraskan kedudukan elemen.
Bagaimana untuk Memohon Kedudukan Mutlak CSS?
Kedudukan mutlak elemen boleh digunakan menggunakan CSS ' kedudukan ” harta dengan nilai “ mutlak ”. Elemen dengan kedudukan mutlak dilaraskan sepadan dengan elemen induk kedudukan terdekatnya. Tetapi jika nenek moyang tidak diletakkan, ia akan menyesuaikan secara relatif kepada bahagian badan dokumen.
Contoh
Mari kita fahami konsep dengan contoh praktikal.
Langkah 1: Buat Fail HTML
Dalam fail HTML, dalam elemen badan, tambahkan div dengan nama kelas ' utama ”. Kemudian, di dalam div yang dibuat, tambahkan teg HTML yang dikaitkan dengan atribut berikut:
-
- “ src ” menyediakan pautan kepada imej.
- “ kelas ” digunakan dalam CSS untuk menggayakan elemen.
- “ segala-galanya ” atribut menentukan teks yang ditunjukkan sebagai ganti imej jika imej gagal dimuatkan pada halaman.
- “ segala-galanya ” atribut menentukan teks yang ditunjukkan pada halaman sebagai ganti imej jika imej gagal dimuatkan pada halaman.
Kemudian, tambahkan div lain yang mengandungi tajuk dan elemen h1 dan p perenggan:
< div kelas = 'utama' >< div kelas = 'kandungan' >
< img src = 'images/linuxlogo.png' kelas = 'rumah' segala-galanya = 'logo linux' lebar = '80px' >
< h1 > Kedudukan mutlak CSS h1 >
< hlm > Hello pasukan Linuxhint ! hlm >
div >
div >
Dalam CSS, beberapa sifat penggayaan digunakan untuk menghiasi elemen HTML.
Langkah 2: Gayakan 'semua' Elemen
* {font-family: Verdana, Geneva, Tahoma, sans-serif;
}
Elemen HTML digayakan menggunakan ' font-family ” harta dengan nilai “ Verdana, Geneva, Tahoma, sans-serif ”. Senarai nilai ini memastikan bahawa jika penyemak imbas tidak menyokong gaya pertama, yang lain akan digunakan.
Langkah 3: Gaya div 'rumah'.
.rumah {jawatan: mutlak;
atas: 50px;
kiri: 45px;
}
Di bawah adalah sifat yang digunakan untuk ' rumah ” div:
-
- “ kedudukan ” harta menetapkan kedudukan elemen. Di sini, tambah ' mutlak ” akan meletakkan elemen relatif kepada bahagian badan HTML.
- “ atas ” harta digunakan untuk pelarasan menegak elemen.
- “ ditinggalkan sifat ” digunakan untuk pelarasan mendatar elemen.
Langkah 4: Gaya div 'kandungan'.
.kandungan {warna latar belakang: biru kadet;
lebar: 300px;
ketinggian: 250px;
padding-left: 40px;
jidar-kiri: 80px;
}
Di bawah ialah sifat CSS yang digunakan pada “ kandungan ” div:
-
- “ warna latar belakang sifat ” menetapkan warna latar belakang elemen.
- “ lebar ” harta menetapkan lebar elemen.
- “ ketinggian ” harta menetapkan ketinggian elemen.
- “ padding-left sifat ” ditetapkan untuk menambah ruang di sebelah kiri kandungan elemen.
- “ margin-kiri sifat ” menentukan ruang di sebelah kiri elemen.
Pada ketika ini, halaman web kami akan kelihatan seperti ini:
Ia boleh dilihat daripada hasil di atas bahawa imej rumah div diletakkan pada 50px dari atas dan 45px dari kiri badan dokumen. Selain itu, kedudukan div rumah ditetapkan secara relatif kepada bahagian badan HTML.
Bagaimana untuk Melaraskan Kedudukan Elemen 'relatif' kepada Elemen Induk Berposisi?
Bahagian ini akan membimbing anda untuk melaraskan kedudukan elemen berbanding dengan elemen induk kedudukan terdekat.
Tetapkan 'kedudukan' Harta div 'kandungan'.
kedudukan: relatif;
Untuk melaraskan kedudukan elemen berbanding dengan elemen induk, tetapkan “ kedudukan ” harta unsur induk kepada “ relatif ” nilai.
Tetapkan 'kedudukan' Sifat Elemen 'img'.
.rumah {jawatan: mutlak;
atas: 100px;
kiri: 220px;
}
di sini:
-
- “ kedudukan ” harta dengan nilai yang ditetapkan sebagai “ mutlak ” akan diletakkan secara relatif kepada elemen induk (iaitu, kedudukan div kandungan ditetapkan dengan nilai relatif).
- “ atas ” hartanah digunakan untuk menetapkan kedudukan elemen dari atas.
- “ ditinggalkan Harta ” digunakan untuk menetapkan kedudukan elemen dari kiri.
Pengeluaran
Ia boleh dilihat daripada hasil bahawa imej telah diposisikan secara relatif kepada div induknya, dan ia kelihatan sesuai.
Kesimpulan
CSS ' kedudukan Harta ” digunakan untuk menetapkan kedudukan elemen HTML. Sifat ini boleh dinilai sebagai tetap, relatif, mutlak, melekit dan statik. ' mutlak nilai ” akan meletakkan elemen yang sepadan dengan elemen induk kedudukan berdekatannya. Siaran ini telah menerangkan kedudukan mutlak CSS dengan contoh praktikal.