首頁 > web前端 > css教學 > css的position定位屬性中:absolute與fixed的差別

css的position定位屬性中:absolute與fixed的差別

怪我咯
發布: 2017-06-22 10:11:53
原創
3378 人瀏覽過

我們知道,在cssposition定位屬性中,表示絕對定位的有兩個值,值absolute與值fixed

都是絕對定位,二者有一致性,也有不同點。那麼二者的區別是什麼呢?那就是positionfixed值定位的元素會固定在原來的位置不變,不管你如何拖曳捲軸,元素都不會改變位置,這從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>
登入後複製

原始頁面是這樣的:

css的position定位屬性中:absolute與fixed的差別

#當向下拖曳了捲軸時,效果是這樣的:

css的position定位屬性中:absolute與fixed的差別

變化很明顯

以上是css的position定位屬性中:absolute與fixed的差別的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板