Kedudukan CSS


Kedudukan CSS

Sifat kedudukan CSS membolehkan anda bertindih satu bahagian reka letak dengan bahagian lain, dan juga boleh melakukan perkara yang selama bertahun-tahun biasanya memerlukan penggunaan berbilang jadual. Contoh:

Kedudukan boleh menjadi rumit kadangkala!

Tentukan elemen yang dipaparkan di hadapan!

elemen boleh bertindih!

Penedudukan

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 bagi elemen HTML, iaitu tiada kedudukan dan elemen itu muncul dalam aliran biasa.

Elemen kedudukan statik tidak akan terjejas oleh bahagian atas, bawah, kiri, kanan.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
div.static {
    position: static;
    border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: static;</h2>

<p>使用 position: static; 定位的元素，无特殊定位，遵循正常的文档流对象:</p>

<div class="static">
该元素使用了 position: static;
</div>

</body>
</html>

Jalankan instance?

Klik butang "Run Instance" untuk melihat instance dalam talian

Kedudukan tetap Kedudukan elemen

ditetapkan relatif kepada tetingkap penyemak imbas.

Walaupun tetingkap ditatal, ia tidak akan bergerak:

Instance

<!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 instance »

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Nota: Kedudukan tetap perlu diterangkan di bawah IE7 dan IE8 boleh menyokongnya.

Kedudukan tetap Menjadikan kedudukan elemen bebas daripada aliran dokumen, jadi ia tidak mengambil ruang.

Elemen kedudukan tetap bertindih dengan elemen lain.

Kedudukan Relatif

Elemen yang agak berkedudukan 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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Kandungan unsur-unsur yang agak berkedudukan dan elemen yang bertindih antara satu sama lain boleh dialihkan, dan ruang yang diduduki pada asalnya tidak akan berubah.

Instance

<!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>

Run instance »

Klik butang "Run Instance" untuk melihat instance dalam talian

Elemen berkedudukan relatif sering digunakan sebagai blok bekas untuk elemen berkedudukan mutlak.

Kedudukan mutlak

Kedudukan elemen kedudukan mutlak adalah relatif kepada elemen induk kedudukan terdekat Jika elemen tidak mempunyai elemen induk diposisikan, kedudukannya adalah relatif kepada <html>:

Instance

<!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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Penempatan secara mutlak menjadikan kedudukan elemen bebas daripada aliran dokumen, jadi ia tidak mengambil ruang.

Elemen yang diletakkan secara mutlak bertindih dengan elemen lain.

kedudukan melekit

melekit secara literal bermaksud melekit dalam bahasa Inggeris, jadi ia boleh dipanggil kedudukan melekit.

kedudukan: melekit; Diletakkan berdasarkan kedudukan skrol pengguna.

Elemen kedudukan melekit bergantung pada penatalan pengguna untuk bertukar antara kedudukan:relatif dan kedudukan:kedudukan tetap.

Ia berkelakuan seperti position:relative; dan apabila halaman menatal di luar kawasan sasaran, ia berkelakuan seperti position:fixed dan ia akan ditetapkan pada kedudukan sasaran. Kedudukan elemen

ialah kedudukan relatif sebelum melepasi ambang tertentu dan kedudukan tetap selepas itu.

Ambang khusus ini merujuk kepada salah satu ambang atas, kanan, bawah atau kiri, dalam erti kata lain, hanya dengan menyatakan satu daripada empat ambang atas, kanan, bawah atau kiri boleh kedudukan melekit berkuat kuasa. Jika tidak, tingkah laku adalah sama dengan kedudukan relatif.

Nota: Internet Explorer, Edge 15 dan versi IE yang lebih awal tidak menyokong kedudukan melekit. Safari memerlukan awalan -webkit- (lihat contoh di bawah).

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>

<div class="sticky">我是粘性定位!</div>

<div style="padding-bottom:2000px">
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
</div>

</body>
</html>

Jalankan instance?

Klik butang "Run Instance" untuk melihat instance dalam talian

Elemen bertindih

Elemen diletakkan secara berasingan daripada aliran dokumen, jadi ia boleh bertindih dengan elemen lain pada halaman

Atribut indeks-z menentukan susunan susunan daripada elemen ( Elemen yang manakah harus diletakkan di hadapan, atau di belakang)

Elemen boleh mempunyai susunan tindanan positif atau negatif:

Contoh

<!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="w3css.gif" width="100" height="140" />
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
</body>
</html>

Jalankan Contoh»

Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian

Elemen dengan susunan tindanan yang lebih tinggi sentiasa berada di hadapan elemen dengan susunan susun yang lebih rendah.

Nota: Jika dua elemen kedudukan bertindih dan tiada indeks-z ditentukan, elemen kedudukan terakhir dalam kod HTML akan dipaparkan terlebih dahulu.

Lagi contoh

Contoh: menggunting bentuk unsur

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
img 
{
	position:absolute;
	clip:rect(0px,60px,200px,0px);
}
</style>
</head>

<body>
<img src="w3css.gif" width="100" height="140" />
</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Contoh ini menunjukkan cara menetapkan bentuk unsur. Elemen dipotong ke dalam bentuk ini dan dipaparkan.

Contoh: Cara menggunakan bar skrol untuk memaparkan kandungan limpahan dalam elemen

<!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>

Contoh Jalankan»

Klik " Jalankan butang "Contoh" untuk melihat contoh dalam talian

Contoh ini menunjukkan cara sifat limpahan mencipta bar skrol dan ditetapkan agar muat apabila kandungan elemen terlalu besar dalam kawasan yang ditentukan.

Contoh: Cara menyediakan pemprosesan limpahan automatik penyemak imbas

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
div 
{
	background-color:#00FFFF;
	width:150px;
	height:150px;
	overflow:auto;
}
</style>
</head>

<body>
<p>overflow 属性规定当内容溢出元素框时发生的事情。</p>

<div>
当你想更好的控制布局时你可以使用 overflow 属性。尝试修改 overflow 属性为: visible, hidden, scroll, 或 inherit 并查看效果。 默认值为 visible。
</div>
</body>

</html>

Jalankan instance»

Klik "Run instance" butang untuk melihat Instance Dalam Talian

Instance: Tukar kursor

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<p>将鼠标移动到这些字上改变鼠标样式cursor.</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
</body>
</html>

Run Instance»

Klik butang "Run Butang Instance" untuk melihat Contoh Dalam Talian

Contoh ini menunjukkan cara menyediakan penyemak imbas untuk mengendalikan limpahan secara automatik.

Semua sifat kedudukan CSS

Nombor dalam lajur "CSS" menunjukkan versi CSS (CSS1 atau CSS2) yang mentakrifkan sifat tersebut.

AtributPeneranganNilaiCSS
bawah mentakrifkan bahagian bawah elemen kedudukan Pengimbangan antara sempadan margin dan sempadan bawah blok yang mengandunginya. auto
panjang
%
warisi		2
klipKlip elemen dengan kedudukan mutlakbentuk
auto
mewarisi		2
kursorTunjukkan kursor bergerak ke jenis yang ditentukanurl

auto

garis silang

lalai

penunjuk

gerakkan

e-saiz semula

ne-resize

nw-resize

n-resize

saiz semula

saiz sw

saiz s

w -ubah saiz

teks

tunggu

bantuan

2
kiri mentakrifkan kedudukan mengimbangi antara tepi jidar kiri elemen dan tepi kiri blok yang mengandunginya. auto
panjang
%
warisi		2
limpahan
 Menetapkan perkara yang berlaku apabila kandungan unsur melimpahi kawasannya. auto
tersembunyi
tatal
kelihatan
warisi		2
overflow-y
Menentukan cara mengendalikan kandungan di tepi atas/bawah kawasan kandungan elemen limpahanauto
tersembunyi
tatal
kelihatan
tiada paparan
tiada kandungan		2
overflow-x
Menentukan cara mengendalikan kandungan di tepi kanan/kiri kawasan kandungan elemen limpahan auto
tersembunyi
tatal
kelihatan
tiada paparan
tiada kandungan		2
kedudukanNyatakan jenis kedudukan elemenmutlak
tetap
relatif
statik
warisan 		2
kanan mentakrifkan kedudukan Pengimbangan antara tepi jidar kanan elemen dan tepi kanan blok yang mengandunginya. auto
panjang
%
mewarisi		2
atas Mentakrifkan pengimbang antara sempadan jidar atas unsur yang diposisikan dan sempadan atas blok yang mengandunginya. auto
panjang
%
warisi		2
z-indexTetapkan susunan susunan elemennombor
auto
mewarisi		2