关于position定位的总结-白红宇

1. position属性

1.1 相对定位

1.1.1 块级元素

相对定位的元素并没有脱离文档流，只是在原有的位置上进行了视觉上的偏移

*{	margin: 0;	padding:0;}body{	position: relative;}.box1,.box2,.box3{	width: 200px;	height: 100px;	position: relative;}.box1{	background: red;}.box2{	background: black;	/*对box2增加left和top，使其偏移原位置*/	left: 20px;	top: 20px;}.box3{	background: gray;}/*html*/
    
    
    
复制代码

没有添加left和top：

给box2添加left和top：

可以看到第三个元素并没有变化，说明第二个元素是占据文档流的

给box3添加cssleft: 20px;top: 20px;

因此可以总结为，元素仍在原文档流中保留有位置，只是发生了视觉上的偏移

1.1.2 行内元素

同理

行内元素在原文档流的基础上进行偏移

1.1.3 单位值与百分比

1.1.1中代码的left和top改为left:50%;top50%;,首先是块级元素：

box2向右偏移的距离为网页可视区的一半，行内元素同理

然而top的50%并没有起作用，按道理应该向下偏移300px的一半，控制台也显示150

暂时不明白原因，望大神告知

给三个box加上一个框：

/*定义框高度为300px*/
    	
     
      xgfdiv
     
	
     
      dytjk
     
	
     
      dtyk
     
    
/*css*/left: 50%;top: 50%;复制代码

box2向下偏移150px

1.2 绝对定位

1.2.1 定义

与相对定位不同，绝对定位是脱离原文档流的，绝对定位的元素会寻找有定位的父（祖）元素作为参照物，然后相对这个参照物来偏移。如果所有父（祖）元素都没有设置position属性值为relative或者absolute则该元素最终将对body进行位置偏移

1.2.2 块级元素

*{	margin: 0;	padding:0;}	body{	position: relative;}	.box1,.box2,.box3{	/*没有设置宽度*/	height: 100px;}	.box1{	background: red;}.box2{	background: orange;	position: absolute;	left: 100px;	top: 100px;}.box3{	background: gray;}/*html*/
    
     dtyjkrtyj
    
    
     good morning
    
    
     rytjsdrty
    
复制代码

给第二个box添加了绝对定位，这个box只能根据body进行定位偏移，并且box3出现在原本box2的位置上。css中都没有给box添加宽度，而没有添加绝对定位的box长度为100%（相对定位的元素也是100%），而box2宽度为auto，在这里随着标签里的文字长度而变化

1.2.3 行内元素

*{	margin: 0;	padding:0;}body{	position: relative;}.box1,.box2,.box3{	width: 100px;	height: 100px;}	.box1{	background: red;}.box2{	background: orange;	position: absolute;	left: 100px;	top: 100px;}.box3{	background: gray;}/*html*/dtyjkrtyjgood morningrytjsdrty复制代码

在添加绝对定位之前，宽度和高度对行内元素不起作用，而box2添加了绝对定位，则box2由行内元素变成块级元素，并进行偏移

1.2.4 单位值和百分比

*{	margin: 0;	padding:0;}body{	position: relative;}.box1,.box2,.box3{	width: 100px;	height: 100px;}	.box1{	background: red;}.box2{	background: orange;	position: absolute;	left: 50%;	top: 50%;}.box3{	background: gray;}/*html*/
    
     dtyjkrtyj
    
    
     good morning
    
    
     rytjsdrty
    
复制代码

对于块级元素，left的百分比值根据父元素宽度计算，top值，根据父元素高度计算，这里父元素高度为200px，一半就是100px

对于行内元素同理

1.2.5 padding和margin对绝对定位的影响

*{	margin: 0;	padding:0;}body{	position: relative;}.main{	width: 100px;	position: relative;	background: black;	padding: 100px;}.box1,.box2,.box3{	width: 100px;	height: 100px;}.box1{	background: red;}.box2{	background: orange;	}.box3{	background: gray;}/*html*/
    	
     
      dtyjkrtyj
     
	
     
      good morning
     
	
     
      rytjsdrty
     
    
复制代码

三个box外面嵌套的父元素有10px的padding

给box2添加定位

position: absolute;left: 50%;top: 50%;

box2的left为父元素宽度的一半，top为200px，说明父元素有内边距时，绝对定位将内边距的距离也算进来了

但父元素增加margin后对box2绝对定位不影响，box2还是相对父元素的content进行绝对定位

1.3 fixed

1.3.1 定义

与absolute相同，fixed脱离原文档流，并以浏览器窗口进行定位，因而它的百分比值是固定的，不随页面滚动而移动，并会覆盖非定位、相对定位、绝对定位元素上，并且与绝对定位一样，设置的宽高对行内元素起作用

1.3.2

页面中可以设置多个fixed，并且在html中靠后的元素会覆盖在靠前的元素上

2. float

2.1

与1.2.5代码相同，仅做如下修改：

.main{	width: 400px;	height: 900px;	position: relative;	background: black;	margin-left: 50px;}.box2{	background: orange;	float: left;}复制代码

给父元素增加外边距50px，box2没有浮动到父元素外边距上

2.2

将上述代码的外边距改为内边距padding-left:50px;

box2也没有浮动到父元素的内边距上

3. float与position

定位元素会覆盖在浮动元素上

3.1 float与相对定位共用时，

*{	margin: 0;	padding:0;}body{	position: relative;}.main{	width: 400px;	height: 900px;	position: relative;	background: black;}.box1,.box2,.box3{	width: 200px;	height: 100px;}.box1{	background: red;}.box2{	background: orange;	position: relative;	left: 10px;	top: 20px;	float: left;}.box3{	background: gray;}/*html*/
    	
     
      dtyjkrtyj
     
	
     
      good morning
     
	
     
      rytjsdrty
     
 
    
复制代码

给box2加上浮动和相对定位

加上浮动之后，box2脱离文档流，所以box3上移原box2的位置，而box2的相对定位属性依然起作用

3.2 浮动与绝对定位

3.2.1 两个共用时，float失效

3.2.2

与3.1代码相同，仅修改box2和box3的代码

.box2{	background: orange;	float: left;}.box3{	background: gray;	position: absolute;	left: 10px;	top: 20px;}复制代码

box3定义了绝对定位，在最上层，覆盖了浮动的box2