css3定位有幾種-前端問答-PHP中文網

css3定位有4種：1、relative（相對定位），偏移參考元素是元素本身，不會使元素脫離文檔流；2、absolute（絕對定位），以父輩元素中最近的定位元素為參考座標；3、fixed（固定定位）；4、static（靜態定位）。

css3定位有幾種

本教學操作環境：windows7系統、CSS3版、Dell G3電腦。

css定位有四種不同類型，position值分別為：static，relative，absolute，fixed

1、relative（相對定位）相對定位的偏移參考元素是元素本身，不會使元素脫離文檔流

。

元素的初始位置所佔據的空間會被保留。

css3定位有幾種相對定位元素常常作為絕對定位元素的父元素。且定位元素經常與z-index屬性進行層次分級

#程式碼實例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style type="text/css">
.rel{
	width: 200px;
	height:200px;
	background: red;
	position: relative;
	top:200px;
	left: 200px;
}
</style>
</head>
<body>
	<p class="rel">相对定位</p>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>

</body>
</html>

登入後複製

效果圖：

#儘管rel元素產生了偏移，但是文字並沒有填補它的原來的位置，可以看出相對定位元素沒有脫離文檔流，原來的位置依然會被保留。 2、absolute（絕對定位）

絕對定位元素以父輩元素中最近的定位元素為參考座標，如果絕對定位元素的父輩元素中沒有採用定位的，那麼此絕對定位元素的參考物件是html

元素會脫離文件流。就

好像 css3定位有幾種文檔流中

被刪除了一樣。

且定位元素經常與z-index屬性進行層次分級

#程式碼實例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">

.abs{
width: 200px;
height:200px;
background: red;
position: absolute;
top: 200px;
left: 200px;
}
 
</style>
</head>
<body>
<div>绝对定位</div>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
</body>
</html>

登入後複製

效果圖：

在此闢謠哈！如果絕對定位元素的父輩元素中沒有採用定位的，那麼此絕對定位元素的參考對像是誰呢，有的人說是body，有的人會說是document，其實都不是，看了MDN上的介紹，以initial containing block為參考，它的尺寸是和視口是一致的，但不是由Viewport所產生的，而是由根元素所產生的。程式碼實例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
  margin:0px;
  padding:0px;
}
body {
  height:1500px;
}
div {
  width:100px;
  height:100px;
  background:green;
  position:absolute;
  bottom:0px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

登入後複製

實例效果圖：

如果參考物件是body或document的話，p元素肯定要位於頁面的最底部，注意到這裡有捲軸，元素只是位於視窗的最底部。

3、fixed

# (

固定定位

) css3定位有幾種

############################################### #####位移的參考座標是可視窗口，使用fixed的元素脫離文檔流。 ###並且定位元素經常與z-index屬性進行層次分級###################實例程式碼：########

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.fix{
width:200px;
height: 200px;
background: red;
position: fixed;
top: 200px;
left: 200px;
}
 
</style>
</head>
<body>
<div>固定定位</div>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
 
 
</body>
</html>

登入後複製

###實例效果圖：############### ####

fixed固定定位和absolute絕對定位比較類似，它們都能夠讓元素產生位移上面演示了固定定位；如果到目前為止還沒有看到與絕對定位的區別，那麼我們可以在文中多加些文字是瀏覽器產生滾動條，拖動滾動條就可以看到兩個定位方式的區別，固定定位的元素如其名一樣，能夠固定在某個位置。而絕對定位就會隨著捲軸滾動而移動位置。

4、static （靜態定位）

預設值，元素框正常產生的，top left bottom right這幾個偏移屬性不會影響其靜態定位的正常顯示

（學習影片分享：css影片教學）

以上是css3定位有幾種的詳細內容。更多資訊請關注PHP中文網其他相關文章！