Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Membetulkan Menegak dan Meletakkan Elemen Secara Mendatar Relatif kepada Div?
Bagaimana untuk Membetulkan Menegak dan Meletakkan Elemen Secara Mendatar Relatif kepada Div?
- Patricia Arquetteasal
- 2024-12-01 12:01:11476semak imbas
Cara Meletakkan Elemen Tetap Menegak dan Mendatar Mutlak
Masalah:
Seorang pengguna berusaha untuk mencipta butang yang mengekalkan jarak menegak tetap dari port pandangan sambil mengekalkan jarak tertentu dari tepi kanan div, tanpa mengira saiz port pandangan.
Penyelesaian:
Kedudukan Mendatar:
Walaupun kedudukan "mendatar mutlak" tidak boleh dicapai secara teknikal dengan penyelesaian yang disediakan, matlamat untuk mengekalkan jarak tetap dari tepi kanan div boleh bertemu. Dengan mengelak daripada menetapkan sifat kiri atau kanan untuk elemen tetap mendatar, div bekas digunakan untuk mengawal kedudukan mendatarnya.
Kedudukan Menegak:
Elemen diposisikan tetap menegak menggunakan kedudukan: harta tetap. Dengan menetapkan nilai teratas, kedudukan menegak dikekalkan tanpa mengira saiz port pandangan.
Sampel Kod:
Kod berikut menunjukkan pelaksanaan:
HTML:
<body>
<div class="inflow">
<div class="positioner">
<div class="fixed"></div>
</div>
</div>
</body>
CSS:
div.inflow {
width: 200px;
height: 1000px;
border: 1px solid blue;
float: right;
position: relative;
margin-right: 100px;
}
div.positioner {position: absolute; right: 0;}
div.fixed {
width: 80px;
border: 1px solid red;
height: 100px;
position: fixed;
top: 60px;
margin-left: 15px;
}
Pertimbangan Utama:
- Div .positioner div mungkin tidak diperlukan jika div.inflow div mempunyai lebar tetap, membenarkan penetapan terus bagi jidar kiri elemen tetap.
- Limpahan tetapan: tersembunyi pada div kontena tidak menjejaskan kedudukan elemen tetap di luar sempadannya.
Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Menegak dan Meletakkan Elemen Secara Mendatar Relatif kepada Div?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!