Posisi elemen HTML memainkan peran penting dalam mengatur komponen halaman web. Lebih khusus lagi, posisi elemen dapat diatur dengan memanfaatkan CSS “ posisi ' Properti. Properti ini dapat diasosiasikan dengan properti ofset, seperti properti atas, kiri, kanan, dan bawah, memberikan nilai khusus untuk menyesuaikan elemen pada halaman. Namun, “ mutlak ” elemen yang diposisikan dapat disesuaikan relatif terhadap elemen yang diposisikan terdekat.
Posting ini akan menjelaskan pemosisian absolut CSS.
Properti 'posisi' CSS
The “ posisi ” properti di CSS dapat digunakan untuk menyesuaikan posisi elemen. Nilai yang berbeda dari properti position adalah fixed, absolute, relative, static, dan sticky. Nilai ini diatur dengan properti offset, seperti atas, kanan, kiri, dan bawah, untuk menyesuaikan posisi elemen.
Bagaimana Cara Menerapkan Pemosisian Absolut CSS?
Pemosisian absolut elemen dapat diterapkan menggunakan CSS ' posisi ” properti dengan nilai “ mutlak ”. Elemen dengan posisi absolut disesuaikan dengan elemen induk terdekatnya. Namun jika ancestor tidak diposisikan, ia akan menyesuaikan relatif terhadap bagian badan dokumen.
Contoh
Mari kita pahami konsepnya dengan contoh praktis.
Langkah 1: Buat File HTML
Di file HTML, di dalam elemen body, tambahkan div dengan nama class “ utama ”. Kemudian, di dalam div yang dibuat, tambahkan tag HTML yang terkait dengan atribut berikut:
-
- “ src ” menyediakan tautan ke gambar.
- “ kelas ” digunakan dalam CSS untuk menata elemen.
- “ semuanya Atribut ” menentukan teks yang ditampilkan sebagai pengganti gambar jika gambar gagal dimuat di halaman.
- “ semuanya Atribut ” menentukan teks yang ditampilkan di halaman menggantikan gambar jika gambar gagal dimuat di halaman.
Kemudian, tambahkan div lain yang berisi judul dan elemen h1 dan p paragraf:
< div kelas = 'utama' >< div kelas = 'isi' >
< img src = 'gambar/linuxlogo.png' kelas = 'rumah' semuanya = 'logo linux' lebar = '80px' >
< h1 > Penentuan posisi absolut CSS h1 >
< p > Halo tim Linuxint ! p >
div >
div >
Di CSS, beberapa properti gaya digunakan untuk menghias elemen HTML.
Langkah 2: Gaya Elemen 'semua'.
* {font-family: Verdana, Jenewa, Tahoma, sans-serif;
}
Elemen HTML diberi gaya menggunakan “ font-family ” properti dengan nilai “ Verdana, Jenewa, Tahoma, sans-serif ”. Daftar nilai ini memastikan bahwa jika browser tidak mendukung gaya pertama, gaya lainnya akan diterapkan.
Langkah 3: Gaya div 'rumah'.
.rumah {posisi: absolut;
atas: 50px;
kiri: 45px;
}
Di bawah ini adalah properti yang diterapkan pada “ rumah ” div:
-
- “ posisi ” properti mengatur posisi elemen. Di sini, ditambahkan “ mutlak ” akan menempatkan elemen relatif terhadap bagian tubuh HTML.
- “ atas ” properti digunakan untuk penyesuaian vertikal elemen.
- “ kiri ” properti digunakan untuk penyesuaian horizontal elemen.
Langkah 4: Gaya div 'konten'.
.isi {background-color: cadetblue;
lebar: 300px;
tinggi: 250px;
padding-kiri: 40px;
margin-kiri: 80px;
}
Di bawah ini adalah properti CSS yang diterapkan ke “ isi ” div:
-
- “ warna latar belakang ” properti mengatur warna latar belakang elemen.
- “ lebar ” properti menyetel lebar elemen.
- “ tinggi ” properti menyetel tinggi elemen.
- “ padding-kiri ” diatur untuk menambah ruang di sisi kiri konten elemen.
- “ margin-kiri ” properti menentukan ruang di sisi kiri elemen.
Pada titik ini, halaman web kita akan terlihat seperti ini:
Dapat dilihat dari hasil di atas bahwa gambar rumah div ditempatkan pada 50px dari atas dan 45px dari kiri badan dokumen. Selain itu, posisi home div diatur relatif terhadap bagian body dari HTML.
Bagaimana Cara Menyesuaikan Posisi Elemen “relatif” dengan Elemen Induk yang Diposisikan?
Bagian ini akan memandu Anda dalam menyesuaikan posisi elemen relatif terhadap elemen induk posisi terdekat.
Tetapkan 'posisi' Properti dari div 'konten'.
posisi: relatif;
Untuk menyesuaikan posisi elemen relatif terhadap elemen induk, setel “ posisi ” milik elemen induk menjadi “ relatif ' nilai.
Atur Properti 'position' dari Elemen 'img'.
.rumah {posisi: absolut;
atas: 100px;
kiri: 220px;
}
Di Sini:
-
- “ posisi ” properti dengan nilai ditetapkan sebagai “ mutlak ” akan diposisikan relatif terhadap elemen induk (yaitu, posisi konten div diatur dengan nilai relatif).
- “ atas Properti ” digunakan untuk mengatur posisi elemen dari atas.
- “ kiri Properti ” digunakan untuk mengatur posisi elemen dari kiri.
Keluaran
Terlihat dari hasil bahwa gambar telah diposisikan relatif terhadap div induknya, dan terlihat cocok.
Kesimpulan
CSS “ posisi ” properti digunakan untuk mengatur posisi elemen HTML. Properti ini dapat dinilai sebagai fixed, relative, absolute, sticky, dan static. “ mutlak ” nilai akan memposisikan elemen yang sesuai dengan elemen induk terdekatnya. Posting ini telah menjelaskan pemosisian absolut CSS dengan contoh praktis.