CSS入門篇（position屬性 定位）

CSS

• 百度不在便捷，圖檔全部失效請多包涵。
• 前言
• 1.relative（相對定位）
• • 1.1作用
  • 1.2特點：
• 2.absolute（絕對定位）
• • 2.1 作用
  • 2.2特點
• 3. fixed（固定定位）
• • 3.1作用
• 4.sticky（磁貼/粘性/吸附定位）
• • 4.1作用
  • 4.2特點
• 5 static（正常/靜态/自然定位）
• • 5.1作用
  • 5.2特性
• 總結

百度不在便捷，圖檔全部失效請多包涵。

前言

前面我們說過了CSS的浮動和清除浮動的方法。本篇的内容主要講述position定位。後續還會有JS 的篇章。

開始前我們先來了解一下這幾個屬性：

屬性	意	值
top	定義了元素的上頂部與其包含塊頂部之間的偏移	auto（預設值），%，px、cm 或inherit（繼承）
left	定義了元素的左邊界部與其包含塊左邊界之間的偏移	auto（預設值），%，px、cm 或inherit（繼承）
right	定義了元素的右邊界部與其包含塊右邊界之間的偏移	auto（預設值），%，px、cm 或inherit（繼承）
bottom	定義了元素的底部部與其包含塊底部之間的偏移	auto（預設值），%，px、cm 或inherit（繼承）
z-index	設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。	auto（預設值），數值，inherit（繼承）
position	規定元素的定位類型	看下個表

position屬性值：

值	意
static	正常/靜态/自然定位
relative	相對定位
absolute	絕對定位
fixed	固定定位
sticky	磁貼/粘性/吸附定位
inherit	繼承（不是定位方式）

1.relative（相對定位）

1.1作用

是元素成為定位的參照物，官話：可定位的祖先元素。

1.2特點：

1.能使用 top/right/bottom/left/z-index進行定位。

2.相對定位的元素不會脫離正常流（相對自身原位置進行偏移）。

3可以使浮動元素發生偏移，并且控制他們的堆疊順序。

4.任何元素都能設定為relative（相對定位）。設定relative（相對定位）的絕對定位後代，以父元素進行定位。（絕對定位中測試）

我們用兩個實驗來看看

測試1(三個高寬為80px的div，第2個設定相對定位，且偏移量為，頂部偏移10px，左邊偏移-10px，)：

position:relative;
top:10px;
left:-10px;
           

複制即可 ：

<div style="width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #000; ">1</div>
<div style="position:relative;top:10px;left:-10px; width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #f00; ">2</div>
<div style="width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #000; ">3</div>
           

效果：

可見：第二個div 是從原位置進行偏移，且原位置保留。

測試2（兩個設定左浮動并且設定相對定位高寬80px的div，第2個div 設定左偏移-80px， ）：

position:relative;
left:-80px;
           

分别把第一個div和第二個div設定z-index值(設定邊框為1，顔色各不同。)；

z-index:1;
z-index:10;
           

我們用第二個div測試 ：

<div style="z-index:1; position:relative; float: left;  width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #000; ">1</div>
<div style=" z-index:10; position:relative;float: left;  left:-82px; width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #f00; ">2</div>

           

第一個div的z-index:1;第二個div的z-index:10;

第一個div的z-index:10;第二個div的z-index:1;

2.absolute（絕對定位）

2.1 作用

使元素脫離正常流。

2.2特點

1.脫離正常流，能使用 top/right/bottom/left/z-index進行定位。

2.設定尺寸要注意！百分比是以誰為參照物最近定位祖先元素（如果沒有定義祖先元素，以body為參照物）。

3.不設定寬高 top/right/bottom/left值都為0時，填充最近定位祖先元素。

4. top/right/bottom/left值都為0時，外邊距設定 auto auto；（居中效果！！）

5.如果沒有定義祖先元素，以body為參照物。

我們用兩個實驗來看看

測試1(三個高寬為80px的div，第2個設定絕對定位，且偏移量為，頂部偏移10px，左邊偏移-10px，)：

position:absolute;
top:10px;
left:-10px;
           

複制即可 ：

<div style="width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #000; ">1</div>
<div style="position:absolute;top:10px;left:-10px; width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #f00; ">2</div>
<div style="width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #000; ">3</div>
           

效果：

可見：第二個div 是從最近定位祖先元素（如果沒有定義祖先元素，以body為參照物），原位置不保留。

測試2（在原有基礎上添加一個div，寬為100px；外邊距auto；定位方式:相對定位；）

<div style="width:100px; margin: auto; position: relative; border: 1px solid #000;"> 
<div style="width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #000; ">1</div>
<div style="position:absolute;top:10px;left:-10px; width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #f00; ">2</div>
<div style="width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #000; ">3</div>
</div>
           

可見：第二個div 是從最近定位祖先元素（也就是設定了相對定位的div），原位置不保留。

3. fixed（固定定位）

3.1作用

相對于浏覽器視窗進行定位。

請自行測試一下！！

<div style="width:400px; height: 2000px; background-color: #ff0;"> 
	<div style=" width: 100px; height: 100px; position: fixed; top: 50px; left: 0px; background-color: #0ff;">
		廣告
	</div>
</div>
           

4.sticky（磁貼/粘性/吸附定位）

4.1作用

制造出吸附效果

4.2特點

1.如果産生偏移，原位置還會在正常流中。

2.如果它的最近祖先元素有滾動條，那麼它的偏移标尺就是最近的祖先元素。

2.如果它的最近祖先元素沒有滾動條，那麼它的偏移标尺就是浏覽器視窗。

自行測試

<div style="width:400px; height: 2000px; background-color: #ff0;"> 
	<div style="width:100%; height: 100px;  background-color:#0f0;"> 圖</div>
	<div style=" width: 100%; height: 100px; position:sticky; top: 0px;  background-color: #0ff;  ">
		導航
	</div>
</div>
           

5 static（正常/靜态/自然定位）

5.1作用

正常流特性

5.2特性

1.無法使用 top/right/bottom/left/z-index進行定位。

2.在其它定位後使用，會讓其它定位全部失效。

總結

本篇我們講述了定位的幾種方法，static是比較特殊的定位。因為 固定定位和吸附定位定位需要滾動條。截圖不能完美展現效果，請自行測試。

css 屬性檢測 CSS 定位

如本文章描述有誤請盡快聯系部落客！感謝您的閱讀與幫助！