简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial css > teks badan

css的position定位属性中：absolute与fixed的区别

怪我咯
Lepaskan： 2017-06-22 10:11:53
asal
3345 orang telah melayarinya

我们知道，css的position定位属性中，表示绝对定位的有两个值，值absolute与值fixed。

都是绝对定位，二者有一致性，也有不同点。那么二者的区别是什么呢？那就是position的fixed值定位的元素会固定在原来的位置不变，不管你如何拖动滚动条，元素都不会改变位置，这从fixed这个英文单词的意思也可以看出，“固定的，不变的，固执的”。而absolute正好相反，拖动滚动条时元素会随着改变位置。

这里给个例子：

<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>测试absolute与fixed</title>
<style type="text/css">
div{
  width:100px;
  height:100px;
  background:green;
}
#left{
  left:0px;
  top:100px;
  position:absolute;
}
#right{
  right:0px;
  top:100px;
  position:fixed;
}
</style>
</head>
<body style="height:1000px;">
<div id="left">absolute</div>
<div id="right">fixed</div>
</body>
</html>
Salin selepas log masuk

原始页面是这样的：

这里写图片描述

当向下拖动了滚动条时，效果是这样的：

这里写图片描述

变化很明显。

Atas ialah kandungan terperinci css的position定位属性中：absolute与fixed的区别. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
css fixed position 定位
sumber：php.cn
Artikel sebelumnya：css position属性：absolute、relative，static，fixed的区别和用法 Artikel seterusnya：CSS position属性中：fixed怎么用的
Kenyataan Laman Web ini
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 terbaru oleh pengarang
Isu terkini
Bagaimanakah anda menggunakan fungsi peta dalam komponen bergaya untuk memproses data? Saya sedang berlatih cara menggunakan fungsi peta. Saya telah mencipta fail json dan ingin...
daripada 2024-03-30 18:06:00
0
1
378
Bagaimana untuk meletakkan teks ke dalam carta donat menggunakan react-chartjs-2.js? Cara meletakkan teks ke dalam carta donat menggunakan react-chartjs-2.js dan Typescript ap...
daripada 2024-03-30 15:14:29
0
1
371
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！