Kedudukan CSS
Penedudukan CSS
Sifat kedudukan CSS membolehkan anda meletakkan elemen. Ia juga boleh meletakkan satu elemen di belakang yang lain dan menentukan perkara yang harus berlaku jika kandungan satu elemen terlalu besar. Elemen
boleh diletakkan menggunakan atribut atas, bawah, kiri dan kanan. Walau bagaimanapun, sifat ini tidak akan berfungsi melainkan sifat kedudukan ditetapkan terlebih dahulu. Mereka juga mempunyai cara kerja yang berbeza, bergantung pada kaedah penentududukan
Terdapat empat kaedah penentududukan yang berbeza.
Kedudukan Statik
Nilai lalai elemen HTML, iaitu tiada kedudukan dan elemen itu muncul dalam aliran biasa.
Elemen kedudukan statik tidak akan terjejas oleh bahagian atas, bawah, kiri, kanan.
Kedudukan Tetap
Kedudukan elemen ditetapkan relatif kepada tetingkap penyemak imbas.
Ia tidak akan bergerak walaupun tetingkap ditatal:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="pos_fixed">Some more text</p>
<p><b>注意:</b> IE7和IE8支持只有一个!DOCTYPE指定固定值.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>
</html>Jalankan program dan cuba
Kedudukan Relatif
Elemen dengan kedudukan relatif diposisikan secara relatif kepada kedudukan normalnya.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
</style>
</head>
<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
<h2 class="pos_right">This heading is moved right according to its normal position</h2>
<p>Relative positioning moves an element RELATIVE to its original position.</p>
<p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p>
<p>The style "left:20px" adds 20 pixels to the element's original left position.</p>
</body>
</html>Jalankan atur cara untuk mencubanya
Kandungan elemen dan elemen yang agak berkedudukan yang bertindih setiap satu lain boleh dialihkan, Ruang yang diduduki asalnya tidak akan berubah.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h2.pos_top
{
position:relative;
top:-50px;
}
</style>
</head>
<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_top">This heading is moved upwards according to its normal position</h2>
<p><b>注意:</b> 即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。</p>
</body>
</html>Elemen kedudukan relatif sering digunakan sebagai blok bekas untuk elemen kedudukan mutlak.
Kedudukan mutlak
Elemen yang diposisikan secara mutlak diposisikan secara relatif kepada elemen induk kedudukan yang terdekat, jika elemen tersebut tidak mempunyai induk yang diposisikan elemen, maka kedudukannya adalah relatif kepada:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h2
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h2>This is a heading with an absolute position</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>
</html>Jalankan atur cara untuk mencubanya
Penempatan secara mutlak menjadikan kedudukan elemen bebas daripada aliran dokumen, jadi ia tidak menempati ruang.
Elemen yang diletakkan secara mutlak bertindih dengan elemen lain.
Elemen bertindih
elemen diletakkan secara berasingan daripada aliran dokumen, supaya ia boleh meliputi elemen lain pada halaman
Atribut indeks-z menentukan susunan susunan elemen (elemen yang manakah harus diletakkan di hadapan, atau di belakang)
Suatu elemen boleh mempunyai susunan susunan positif atau negatif:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="100" height="140" />
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
</body>
</html>Jalankan program untuk mencuba
Elemen dengan susunan tindanan yang lebih tinggi sentiasa berada di hadapan elemen dengan susunan tindanan yang lebih rendah.
Nota: Jika dua elemen kedudukan bertindih dan tiada indeks-z ditentukan, elemen kedudukan terakhir dalam kod HTML akan dipaparkan di atas.
Lagi contoh
Cara menggunakan bar skrol untuk memaparkan kandungan limpahan dalam elemen
rreeeJalankan program Cubalah
Contoh
Cara menukar kursor
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}
div.hidden
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}
</style>
</head>
<body>
<p>overflow 属性规定当内容溢出元素框时发生的事情。.</p>
<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
<p>overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
</body>
</html>Jalankan program dan cuba
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
