定位這個知識點有難掌握，但是越難掌握我們就要去好好理解，多敲敲代碼，自己動手測試一把，我相信大家都能夠把它理解消化掉，變成自己的東西。大家以後學習還是多多動手實踐，這樣才能把理解知識實踐化。
不多廢話，現在學習定位。
常見的定位就那麼4中，4中不多也不少，把它好好理解就等於消化了。
1、static定位（靜態）（預設的【left 和 top 無效】）
2、relative 相對定位
3、absolute 絕對位置
4、fixed 固定的
舉列子說明
a、static定位 [static定位（靜態）（預設的）]：
預設的：我先給出HTML 和css檔案
HTML檔案：
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="position.css">
<title>定位練習</title>
</head>
<body>
<div class="div1">內容一</div>
<div class="div1">內容二</div>
<div class="div1">內容三</div>
<div class="div1">內容四</div>
</div>
</body>
</html>
css檔案：
.div1{
background:green;
float:left;
margin-left:5px;
height:30px;
width:70px;
}
：（原圖）
b、relative 相對定位(要求讓內容二脫離標準流，採用相對定位，把內容二放在內容三的下面)我們把內容二設定一個id選取器
先看看效果：相對定位是在原來的基礎位置上重新置放，雖然它脫離標準流後但是它的空間不能被佔用。如大家還不能理解，可以在My Code基礎上自己修改資料進行測試。
HTML檔案：
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="position.css">
<title>定位練習</title>
</head>
<body>
<div class="div1">內容一</div>
<div id="spe" class="div1">內容二</div>
<div class="div1">內容三</div>
<div class="div1">內容四</div>
</div>
</body>
</html>
css檔案：
.div1{
background:green;
float:left;
margin-left:5px;
height:30px;
width:70px;
}
#spe{
position:relative;
top:35px;
left:75px;
}
c、absolute（絕對位置）
：
與原圖相比，絕對位置：對該元素最近那個脫離了標準流的元素進行定位，如果沒有父元素，則相對body左上方作為標準進行定位
HTML檔案未變：
css檔案：
.div1{
background:green;
float:left;
margin-left:5px;
height:30px;
width:70px;
}
/* 相對定位
#spe{
position:relative;
top:35px;
left:150px;
}
*/
#spe{
position:absolute; /*絕對位置*/
top:40px;
left:70px;
}
理解這句話：對該元素最近那個脫離了標準流的元素進行定位，如果沒有父元素，則相對body左上方作為標準進行定位。
下面我們做一個實驗：
內容二在一個div中，顯示這個div已經絕得定位了一次，現在把內容二在這個div（粉紅背景中那個）中進行定位，我們把內容二進行absolute（絕對位置）它是怎麼移動的，依據誰移動的？
HTML檔案：
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="position.css">
<title>定位練習</title>
</head>
<body>
<div class="div1">內容一</div>
<div id="spe" class="div1"><div class="div2">內容二</div></div>
<div class="div1">內容三</div>
<div class="div1">內容四</div>
</div>
</body>
</html>
css檔案：
.div1{
background:green;
float:left;
margin-left:5px;
height:30px;
width:70px;
}
/* 相對定位
#spe{
position:relative;
top:35px;
left:150px;
}
*/
#spe{
width:300px;
background:pink;
height:100px;
position:absolute;
top:80px;
left:70px;
}
.div2{
background:green;
float:left;
height:30px;
width:70px;
}
現在開始把內容二進行移動：向上移動10px,向左移動20px，主要他移動的方向。
：它是在它的父元素（被包住的那個Div為標準）中移動，而不是以body為標準移動了
css檔案：
.div1{
background:green;
float:left;
margin-left:5px;
height:30px;
width:70px;
}
/* 相對定位
#spe{
position:relative;
top:35px;
left:150px;
}
*/
#spe{
width:300px;
background:pink;
height:100px;
position:absolute;
top:80px;
left:70px;
}
.div2{
background:green;
float:left;
height:30px;
width:70px;
position:absolute;
top:10px;
left:20px;
}
所以：從看，所謂絕對位置是指，對該元素最近的那個脫離了標準流的元素定位,如果沒有父元素(或者有父元素，但是父元素沒有脫離標準流)，則相對body左上方定位.
d、固定定位（fixed）
所謂固定定位是指：不管怎樣，都是以視圖視窗的左上方進行定位
大家還有不能理解的可以把它當作一個小練習自己一邊做一邊慢慢理解，就能掌握，沒有什麼痛點。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
