Rumah > Artikel > hujung hadapan web > Apakah perbezaan antara kedudukan tetap dan kedudukan mutlak dalam css

Apakah perbezaan antara kedudukan tetap dan kedudukan mutlak dalam css

青灯夜游asal: 2022-09-22 17:02:212294semak imbas

Perbezaan antara kedudukan tetap dan kedudukan mutlak: 1. Kedudukan tetap menggunakan tetapan gaya "kedudukan: tetap;", manakala kedudukan mutlak menggunakan tetapan gaya "kedudukan: mutlak;" 2 kedudukan tetap ialah Skrin (port view pelayar), manakala asas untuk kedudukan mutlak ialah elemen induk.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Kedudukan tetap dalam css

Kedudukan tetap menggunakan tetapan "kedudukan: tetap;".

Elemen kedudukan tetap diposisikan secara relatif kepada port pandangan, bermakna ia akan sentiasa berada dalam kedudukan yang sama walaupun halaman itu ditatal. Iaitu, elemen tetap tidak akan berubah kedudukan apabila bar skrol diseret. Kedudukan elemen kedudukan tetap tidak berubah dalam medan pandangan.

Atribut atas, kanan, bawah dan kiri digunakan untuk meletakkan elemen ini.

position:fixed;
top:像素值;
bottom;像素值;
left:像素值;
right:像素值;

"kedudukan:tetap;" digunakan dalam kombinasi dengan empat atribut atas, bawah, kiri dan kanan. Antaranya, "posisi:tetap;" menggunakan atas, Empat atribut bawah, kiri dan kanan digunakan untuk menetapkan kedudukan elemen berbanding pelayar.

Tidak semua daripada empat atribut atas, bawah, kiri dan kanan digunakan. Ambil perhatian bahawa objek rujukan empat nilai ini ialah empat tepi penyemak imbas.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
height: 1500px;
}
header {
width: 100%;
background-color: #FFC0CB;
position: fixed;
top: 0;
}
</style>
</head>
<body>
<header>
<h1>网站标题</h1>
</header><br><br><br><br><br><br><br>
<div>测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！</div>
</body>
</html>

Apakah perbezaan antara kedudukan tetap dan kedudukan mutlak dalam css

Kedudukan mutlak dalam css

Kedudukan mutlak menggunakan "kedudukan: mutlak;" naik.

Dalam CSS, kedudukan mutlak ialah kaedah penentududukan yang menjadikan kedudukan elemen bebas daripada aliran dokumen.

Kotak elemen yang ditetapkan kepada kedudukan mutlak dialih keluar sepenuhnya daripada aliran dokumen dan diletakkan secara relatif kepada blok yang mengandunginya, yang mungkin merupakan elemen lain dalam dokumen atau blok yang mengandungi awal. Secara lalai, kedudukan kedudukan mutlak adalah relatif kepada penyemak imbas, dan diletakkan dengan atas, kanan, bawah dan kiri. Ruang yang sebelum ini diduduki oleh elemen

dalam aliran dokumen biasa ditutup, seolah-olah elemen itu tidak wujud. Elemen menjana kotak peringkat blok selepas kedudukan, tanpa mengira jenis kotak yang asalnya dijana dalam aliran biasa.

Elemen yang diposisikan secara mutlak diposisikan secara relatif kepada nenek moyang kedudukan yang terdekat (bukannya diposisikan secara relatif kepada port pandangan, seperti dalam tetap). Walau bagaimanapun, jika elemen yang diletakkan secara mutlak tidak mempunyai nenek moyang, ia akan menggunakan badan dokumen dan bergerak dengan skrol halaman.

Mari kita lihat dengan lebih dekat kedudukan mutlak (mutlak). Sebenarnya, kedudukan mutlak mutlak dan terapung separa adalah serupa jika anda boleh memahami terapung terapung, ia akan membantu untuk memahami kedudukan mutlak mutlak.

Mula-mula mari kita bercakap tentang persamaan antara mutlak dan terapung: Membungkus dan Sangat menipu

Membungkus

Bak kata pepatah, sekeping gambar bernilai seribu perkataan (cuma bezanya: p dalam gambar di bawah menambah mutlak)

Apakah perbezaan antara kedudukan tetap dan kedudukan mutlak dalam css

<p   style="max-width:90%">
  <img  src="img/25/1.jpg" / alt="Apakah perbezaan antara kedudukan tetap dan kedudukan mutlak dalam css" >
</p>
<p style="border:4px solid red; position: absolute;">
  <img  src="img/25/2.jpg" / alt="Apakah perbezaan antara kedudukan tetap dan kedudukan mutlak dalam css" >
</p>

Sekali mutlak atau terapung ditambah pada elemen, ia bersamaan dengan Tambah paparan: blok; Apakah maksudnya? Sebagai contoh, lebar lalai bagi rentang elemen sebaris adalah penyesuaian dan ia tidak akan berfungsi jika anda menambah lebar padanya. Untuk menetapkan lebar, anda perlu menetapkan span untuk memaparkan:blok. Tetapi jika anda menambah mutlak atau terapung pada span, atribut paparan span secara automatik akan menjadi blok dan lebar boleh ditentukan. Oleh itu, jika anda melihat absolute/float dan display:block muncul pada masa yang sama dalam CSS, maka display:block ialah kod CSS berlebihan.

Penipuan tinggi

Dalam contoh di atas, mutlak ditambah pada p pada lapisan luar gambar, jadi tahap penipuan yang tinggi tidak dicerminkan dengan baik, jadi mutlak dipindahkan ke gambar dalam, kesannya keluar:

Apakah perbezaan antara kedudukan tetap dan kedudukan mutlak dalam css

<p   style="max-width:90%">
  <img  src="img/25/1.jpg" / alt="Apakah perbezaan antara kedudukan tetap dan kedudukan mutlak dalam css" >
</p>
<p style="border:4px solid red;">
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="Apakah perbezaan antara kedudukan tetap dan kedudukan mutlak dalam css" >
</p>

Jika anda telah melihat penjelasan terperinci CSS terapung, anda akan mendapati bahawa kesannya adalah sama. Tetapi prinsip di sebalik mereka sebenarnya berbeza dan tidak betul-betul sama. Anda boleh melihatnya dengan menambahkan beberapa teks:

Apakah perbezaan antara kedudukan tetap dan kedudukan mutlak dalam css

<p   style="max-width:90%">
  <img  src="img/25/1.jpg" / alt="Apakah perbezaan antara kedudukan tetap dan kedudukan mutlak dalam css" >
</p>
<p style="border:4px solid red;">
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="Apakah perbezaan antara kedudukan tetap dan kedudukan mutlak dalam css" >
  我是一个绝对定位的absolute元素
</p>

Jelas daripada gambar bahawa teks itu diliputi oleh gambar, yang berbeza daripada terapung. float memperdayakan elemen induk untuk berfikir bahawa ketinggiannya telah runtuh, tetapi elemen apungan itu sendiri masih dalam aliran dokumen, dan teks akan mengelilingi elemen apungan dan tidak akan dikaburkan.

Tetapi mutlak tidak lagi menipu elemen induk, tetapi mempunyai hubungan hierarki . Jika elemen induk dalam aliran dokumen biasa dianggap sebagai fana, maka mutlak telah menjadi abadi Dalam istilah hari ini, ia tidak lagi berada dalam dimensi yang sama. Dari perspektif elemen induk, imej yang ditetapkan kepada mutlak telah hilang sepenuhnya, jadi teks dipaparkan dari hujung kiri. Tahap mutlak adalah tinggi, jadi gambar meliputi teks.

Saya masih ingat apabila saya mula-mula bersentuhan dengan CSS, yang masih bajingan dengan kuasa tempur 5, dan saya tahu bahawa mutlak boleh mempunyai konsep hierarki, saya tersilap menganggap bahawa saya telah memahaminya sepenuhnya Saya memikirkannya, ia benar-benar mengelirukan (tentunya ini bukan perkara yang buruk) , setiap kali anda merasakan bahawa diri anda yang lalu seperti sekeping tauhu, itu bermakna anda telah membuat kemajuan, sebaliknya, jika anda sentiasa fikirkan tentang keadaan anda ketika itu, ini bermakna anda masih berpuas hati.)

Setelah memiliki asas di atas, anda juga perlu memahami ciri-ciri mutlak berikut

Cara menentukan titik sauh
Cinta dan bunuh antara satu sama lain dengan saudara
Hubungan dengan z-index
Kurangkan overhed lukisan semula dan aliran semula

Perbezaan antara kedudukan tetap dan kedudukan mutlak

1. Kaedah tetapan yang berbeza

Gunakan "kedudukan: tetap;"

Kedudukan mutlak menggunakan tetapan "kedudukan: mutlak;".

2. Asas offset yang berbeza

Pangkalan offset untuk kedudukan tetap ialah skrin (tetingkap penyemak imbas), manakala asas untuk kedudukan mutlak ialah elemen induk.

Dan sebaiknya ambil perhatian bahawa ie6 tidak serasi dengan kedudukan tetap tetapi serasi dengan kedudukan mutlak

(Mempelajari perkongsian video: bahagian hadapan web )

Atas ialah kandungan terperinci Apakah perbezaan antara kedudukan tetap dan kedudukan mutlak dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：ubah bentuk css mempunyai beberapa sifatArtikel seterusnya：ubah bentuk css mempunyai beberapa sifat

Artikel berkaitan

Lihat lagi