CSS position: fixed 固定定位

admin發表於2018-02-12
CSS

fixed固定定位和absolute絕對定位比較類似，它們都能夠讓元素產生位移，並且脫離文件流。

關於absolute絕對定位可以參閱CSS absolute絕對定位一章節。

通過以下程式碼可以將元素設定為固定定位:

[CSS] 純文字檢視 複製程式碼
position:fixed

top、bottom、left和right屬性分別設定元素在垂直和水平方位的位移尺寸。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.ant{ 
  width:100px; 
  height:100px; 
  background-color:#0094ff; 
  position:fixed;
  left:50px;
  top:30px;
}  
</style> 
</head> 
<body> 
<div class="ant"></div> 
</body> 
</html>

上面演示了固定定位；到目前為止還沒有看到與絕對定位的區別，再來看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body {
  margin:0px;
  padding:0px;
  height:1500px;
}
.ant-absolute{ 
  width:100px; 
  height:100px; 
  background-color:#0094ff; 
  position:absolute;
  left:50px;
  top:30px;
} 
.ant-fixed{ 
  width:100px; 
  height:100px; 
  background-color:#0094ff; 
  position:fixed;
  right:50px;
  top:30px;
}  
</style> 
</head> 
<body> 
<div class="ant-absolute"></div> 
<div class="ant-fixed"></div>
</body> 
</html>

拖動滾動條就可以看到兩個定位方式的區別，固定定位的元素如其名一樣，能夠固定在某個位置。

二.固定定位位移參考物件：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#relative {
  position: relative;
  width: 100px;
  height: 100px;
  background: green;
}
#fixed {
  position:fixed;
  width: 150px;
  height: 50px;
  text-align:center;
  line-height:50px;
  top: 0;
  right: 10px;
  background: #ccc;
}
</style>
</head>
<body>
<div id="relative">
  <div id="fixed">螞蟻部落</div>
</div>
</body>
</html>

position:fixed定位元素的參考物件是視口（準確的說是視口產生的包含塊，此包含塊的尺寸和左上角均與視口一致，於是當我們拖動滾動條的時候，fixed定位的元素會有固定效果。），而不是距離它最近的採用定位的元素。

如果固定定位的尺寸是百分比形式，它的參考尺寸也是視口的尺寸，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#relative {
  position: relative;
  width: 100px;
  height: 100px;
  background: green;
}
#fixed {
  position:fixed;
  width: 50%;
  height: 50%;
  text-align:center;
  line-height:50px;
  top: 0;
  right: 50px;
  background: #ccc;
}
</style>
</head>
<body>
<div id="relative">
  <div id="fixed">螞蟻部落</div>
</div>
</body>
</html>

transform對位移參考物件也會產生影響，具體參閱transform變換改變定位元素的包含塊一章節。

相關文章