Jika anda ingin mengawal cara sesuatu elemen diletakkan dalam halaman web, kita perlu menggunakan sifat CSS kedudukan. Sifat yang mentakrifkan kedudukan elemen dalam dokumen adalah penting, sifat dan kedudukan atas, kiri, bawah dan kanannya ialah sifat trengkas yang boleh digunakan untuk menetapkan keempat-empat sifat.
Di bawah menyatakan kemungkinan nilai yang boleh kami gunakan dengan atribut lokasi -
Statik - Elemen diletakkan mengikut aliran semula jadi dokumen. Tiada perbezaan dalam sifat atas, kanan, bawah, kiri atau indeks z. Ini ialah pilihan lalai.
Relatif- Elemen diletakkan mengikut aliran semula jadi dokumen, dan pengimbangnya relatif kepada diri mereka sendiri ditentukan oleh nilai atas, kanan, bawah dan kiri. Ruang yang diperuntukkan kepada elemen dalam susun atur halaman adalah sama seperti apabila kedudukan statik, kerana offset tidak mempunyai kesan pada kedudukan mana-mana elemen lain.
Apabila nilai indeks-z bukan automatik, nilai ini akan mewujudkan konteks tindanan baharu. Cara ia mempengaruhi elemen jadual-*-kumpulan, baris, lajur, sel dan kapsyen jadual tidak ditentukan.
Sama sekali- Elemen ini telah dialih keluar daripada aliran dokumen biasa dan tiada ruang untuknya dalam susun atur halaman. Jika ya, kaitkan ia dengan moyang itu jika tidak, letakkannya berbanding dengan blok yang mengandungi pertama. Nilai atas, kanan, bawah dan kiri menentukan kedudukan terakhirnya.
Apabila nilai indeks-z bukan automatik, nilai ini akan mewujudkan konteks tindanan baharu. Kedudukan mutlak menghalang jidar kotak daripada bertindih dengan jidar lain.
FIXED - Elemen telah dialih keluar daripada aliran dokumen biasa dan tiada ruang untuknya dalam susun atur halaman. Melainkan salah satu nenek moyangnya mempunyai sifat transformasi, perspektif atau penapis yang ditetapkan kepada sesuatu selain daripada tiada (lihat Spesifikasi CSS Transforms), atau mempunyai sifat perubahan kehendak ditetapkan untuk berubah, dalam hal ini nenek moyang bertindak sebagai blok yang mengandungi, sebaliknya Ia diposisikan relatif kepada blok mengandungi awal yang ditubuhkan oleh viewport. (Perhatikan bahawa sudut paparan dan perbezaan penapis antara penyemak imbas boleh mengakibatkan blok tertutup.) Nilai atas, kanan, bawah dan kiri menentukan kedudukan terakhirnya.
Konteks tindanan baharu sentiasa dibuat dengan nilai ini. Perlu diingatkan bahawa unsur melekit "melekat" pada nenek moyang terdekat yang mempunyai "mekanisme penatalan" (dihasilkan apabila limpahan disembunyikan, ditatal, auto, atau ditindih), walaupun nenek moyang itu bukan moyang terdekat yang sebenar. tatal.
Elemen relatif dan berkedudukan mutlak
Di bawah ialah kod sampel menggunakan kedudukan relatif.
<!DOCTYPE html>
<html>
<head>
<style>
.relativePositioning {
position: relative;
left: 50px;
border: 2px solid red;
}
</style>
</head>
<body>
<h2>Using relative positioning in CSS</h2>
<p>This is a sample paragraph onto which relative positioning is being applied.</p>
<div class="relativePositioning">This part of the content has position : relative</div>
</body>
</html>
Di bawah adalah contoh kod menggunakan kedudukan mutlak.
<!DOCTYPE html>
<html>
<head>
<style>
.relativePositioning {
position: relative;
width: 500px;
height: 250px;
border: 2px solid red;
}
.absolutePositioning {
position: absolute;
top: 100px;
right: 0;
width: 300px;
height: 150px;
border: 2px solid red;
}
</style>
</head>
<body>
<h2>Example of using absolute positioning</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, possimus.</p>
<div class="relativePositioning">
This is the container element with position : relative
<div class="absolutePositioning">This is an example of absolute positioning</div>
</div>
</body>
</html>
Kini kami memahami cara penentududukan berfungsi dan cara menggunakan kedudukan mutlak dalam CSS. Kami akan menggunakan pengetahuan kami untuk menyelesaikan masalah yang dihadapi.
Berikut ialah contoh menggunakan kedudukan mutlak dalam CSS untuk memaparkan butang dalam baris baharu.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<style>
.outerBox {
position: relative;
}
.btn-pri {
color: #fff;
padding: 0.5px 7% 0.5px 5px;
height: 45px;
display: inline-block;
cursor: pointer;
background: green;
border: 2px solid #ccc;
}
.btn-txt {
margin-top: 6px;
margin-bottom: 6px;
}
.btn-pri-2 {
position: absolute;
left: 1px;
top: 53px;
}
</style>
<body>
<div class="outerBox">
<a class="btn-pri btn-pri-1">
<h5 class="btn-txt">Lorem ipsum dolor sit amet.</h5>
</a>
<a class="btn-pri btn-pri-2">
<h5 class="btn-txt">Lorem ipsum dolor sit amet.</h5>
</a>
</div>
</body>
</html>
Untuk meringkaskan, elemen diposisikan pasti membolehkan anda memaparkan butang dalam baris baharu dengan menyatakan lokasi tepatnya pada halaman. Ini boleh dilakukan dengan menetapkan sifat "kedudukan" elemen kepada "mutlak" dan kemudian memberikan nilai untuk harta atas, kiri, kanan atau bawah untuk menunjukkan kedudukan tepat yang anda mahu ia diletakkan. Jika digunakan dengan betul, kedudukan mutlak boleh membantu anda membuat susun atur yang bersih dengan usaha yang minimum.
Atas ialah kandungan terperinci Bagaimana untuk meletakkan butang render sepenuhnya dalam baris baharu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
