定位界的NO.1 —— 絕對定位

時間 2019-12-10

原文原文鏈接

說道最後一個了。絕對定位，這傢伙在定位界中優先級別最高，可是用起來卻並不複雜。css

何爲絕對定位box? 由position爲absolute或fixed的dom元素產生的box，咱們稱之爲絕對定位box。這類box是如何進行絕對定位的？position爲absolute或是fixed會產生不一樣的效果嗎？咱們如今就去看看。html

一. position爲absolute的絕對定位box

用法：設置position爲absolute，選定一個離它最近的父級定位box(第25條)做爲它的containing block(第11條)，利用left/right/top/bottom(用法請參考這裏) 來相對containing block做必定的偏移（固然，你也能夠不偏移）。chrome

會不會有童鞋會問，若是絕對定位box沒有父級定位box怎麼辦？嗯....有道理，是有可能出現的。bash

你要相信CSS開發小組！他們有設置備胎的。dom

若是絕對定位box沒有父級定位box，那麼它的containing block就是initial containing block(第10條)。佈局

二. position爲fixed的絕對定位box

用法：設置position爲fixed，以initial containing block做爲它的containing block, 利用left / right / top / bottom 來相對containing block做必定的偏移。測試

特色：在continuous media(看第1條)上，無論怎樣滾動網頁，該box的位置始終保持不變。道理很簡單，由於initial containing block的位置是不會變化的！固然，若是某個position爲absolute的box是以initial containing block爲定位box，也會有一樣的效果。ui

三. 實踐中出真理

例一 left, top不爲auto(適用於兩種絕對定位box)spa

<html>
  <head>
  <style type="text/css">	
	*{
		padding:10px;
	}
	.parent{
		width:500px;
		height:150px;
		margin-top:50px;
		margin-left:auto;
		margin-right:auto;
		border:solid 2px #5CBDD2; 
	}
	.relative-child{
                position: relative;
		background-color: #5CBDD2;
	}
	.absolute-box{
		position: absolute;
		width:200px;
		height:50px;
		top:30px;
		left:50px;
		background-color: #E2D72F;
	}
  </style>
  </head>
<body>
<div class='parent'>
 	<div class='relative-child'>
 		I'm a relative box. I'm a relative box. I'm a relative box. I'm a relative box. 
 		<div class='absolute-box'>
 			I'm a absolute box </div> </div> </div> </body> </html>複製代碼

效果圖：code

很明顯，絕對定位box相對它的父級定位box作了必定的偏移，按照代碼裏的設置，應該是向下偏移30px，向右偏移50px。

例二 left，right, top, bottom均爲auto(適用於兩種絕對定位box)

在例一的基礎上，去掉absolute-box類中的left，top，修改爲：

.absolute-box{
		position: absolute;
		width:200px;
		height:50px;
		background-color: #E2D72F;
	}
複製代碼

再來看看效果：

沒有做任何的偏移設置，絕對定位box居然沒有遮擋住文字。這。。。發生了什麼？咱們去調研一下。

該例去掉了對left及top的設置，故left, right, top, bottom均會取默認值auto。auto這個值，明顯不是一個肯定值，那在計算絕對定位box的位置時到底會設置成什麼值呢？

這裏涉及到高度計算規則。在CSS中，絕對定位box的高度須要知足如下等式：

' top' + 'margin-top' + 'border-top-width' + ' padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width '+ 'margin-bottom' + 'bottom' = height of containing block

若是top,bottom爲auto，height不爲auto，那麼top將取「static position」時的值。什麼叫static position? 就是假設該box的position爲static,float爲none,clear爲none時其在普通流中的位置，此時top值爲containing block(第11條)的上邊緣到該box的上邊緣的距離，而bottom只需等式相減便可獲得。

同理，在計算絕對定位box的寬度時就會肯定left及right的值。left取static position時的值，right取等式相減的結果。

所以，left、right、top、bottom爲auto時，絕對定位box的位置就是它在普通流中的位置。

若是不相信，咱們看看它變成普通流中的box的效果。

去掉absolute-box類中的position，修改爲：

.absolute-box{
		width:200px;
		height:50px;
		background-color: #E2D72F;
	}
複製代碼

登登登，效果以下：

絕對定位box的位置是否是和上圖的同樣。注意啊，我說的僅僅是位置，不是全部的都如出一轍。有童鞋也許會說，父級定位box的高度變了。固然會變了，對於高度爲auto的block-level box而言，計算高度時是不包含子box中絕對定位box的高度，因此它們不徹底同樣。

例三父級定位box爲inline box（只適用position爲absolute的box）

inline box做爲父級定位box時會稍有些特殊，這裏單獨示例一下。

先看源碼：

<html>
  <head>
  <style type="text/css">	
	.parent{
		width:500px;
		height:150px;
		margin-top:50px;
		margin-left:auto;
		margin-right:auto;
		border:solid 2px #5CBDD2; 
	}
	.relative-child{
                position: relative;
		background-color: #5CBDD2;
	}
	.absolute-box{
		position: absolute;
		width:200px;
		height:50px;
		top:50px;
		left:50px;
		background-color: #E2D72F;
		text-align: center;
		line-height: 50px;
	}
  </style>
  </head>
<body>
<div class='parent'>
 	<span class='relative-child'>I'm a relative box. I'm a relative box. I'm a relative box. <div class='absolute-box'> I'm a absolute box
 		</div>
 	</span>
</div>
</body>
</html>複製代碼

效果以下：

很正常對不對。其實，我是想告訴你們它背後隱藏的一條規則。

看過這篇文章的童鞋應該知道，inline box是須要放置在line box裏的。不知道有木有人想過，若是一個inline box太長，一個line box放不下怎麼辦？此時，inline box會發生分裂（你要是經過不留空格的方式或其餘方式阻止分裂，我也木有辦法，這裏僅討論正常狀況），變成多個inline box，且分別放置在相鄰的line box中。若是沒分裂前的inline box剛好是某個絕對定位box的父級定位box，由於空間不夠進行分裂，就會出現多個符合條件的父級定位box的狀況。

挑哪一個？

以第一個inline box的上邊緣（第24條）及左邊緣做爲絕對定位box的top及left的參考物。

增長上例中span的內容，具體修改以下：

<body>
<div class='parent'>
 	<span class='relative-child'>I'm a relative box. I'm a relative box. I'm a relative box. I'm a relative box. I'm a relative box. I'm a relative box. I'm a relative box. I'm a relative box. I'm a relative box. <div class='absolute-box'> I'm a absolute box
 		</div>
 	</span>
</div>
</body>
複製代碼

效果以下：

兩個效果圖對比一下，除了第二個圖比第一個圖多出兩個inline box外，絕對定位box的位置並無發生變化，它參考的始終是第一個inline box。

例四父級定位box爲initial containing block(適用於兩種絕對定位box)

當position爲absolute的絕對定位box沒有父級定位box時，initial containing block就會充當這一角色（固然，這種狀況始終適用於position爲fixed的絕對定位box）。

<html>
  <head>
  <style type="text/css">	
	.parent{
		width:500px;
		height:150px;
		margin-top:50px;
		margin-left:auto;
		margin-right:auto;
		border:solid 2px #5CBDD2; 
	}
	.absolute-box{
		position: absolute;
		width:200px;
		height:50px;
		left:100px;
		top:100px;
		background-color: #E2D72F;
		padding:10px;
	}
  </style>
  </head>
<body>
<div class='parent'>
 		<div class='absolute-box'>
 			I'm a absolute box </div> </div> </body> </html> 複製代碼

效果就是醬紫：