定位界的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> 复制代码

效果就是酱紫：

上图中的绝对定位box参考的是initial containing box，所以相对左上角蓝点坐标为(50,50)。

四. 与浮动进行比较

他俩的共同点是：都脱离了普通流。

不一样点在于各自脱离的程度。

浮动虽然脱离了普通流，但它却在必定程度上影响着普通流box的布局，诸如一言不合就占据别人的地盘，挡住下方的block-level box，诱惑一堆文字围绕在旁等等。

而绝对定位，只会根据参照物去做必定的偏移，即便有时候会遮挡住其余box。它是从骨子里彻底脱离了普通流，丝绝不会影响普通流box的布局！

整体看来，绝对定位是否是比浮动容易理解多了^ ^~~

写到这，其实很开心，终于系统的整理一遍了，期待本身可以再接再砺，接着出下个系列文章 *^ ^*！

ps: 本文中的例子均是在chrome 49.0上测试。