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*/
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
复制代码

没有添加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*/
<div style="height: 300px;"><div class="box1">xgfdiv</div><div class="box2">dytjk</div><div class="box3">dtyk</div>
</div>
/*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*/
<div class="box1">dtyjkrtyj</div>
<div class="box2">good morning</div>
<div class="box3">rytjsdrty</div>
复制代码

给第二个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*/
<span class="box1">dtyjkrtyj</span>
<span class="box2">good morning</span>
<span class="box3">rytjsdrty</span>
复制代码

在添加绝对定位之前，宽度和高度对行内元素不起作用，而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*/
<div class="box1">dtyjkrtyj</div>
<div class="box2">good morning</div>
<div class="box3">rytjsdrty</div>
复制代码

对于块级元素，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*/
<div class="main"><div class="box1">dtyjkrtyj</div><div class="box2">good morning</div><div class="box3">rytjsdrty</div>
</div>
复制代码

三个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*/
<div class="main"><div class="box1">dtyjkrtyj</div><div class="box2">good morning</div><div class="box3">rytjsdrty</div>
</div>
复制代码

给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

3.3 浮动与fixed共用时，浮动失效