上面我们一起研究了浮动布局的特点和如何清除浮动给布局带来的不良影响，今天我们继续来研究定位流布局的特点和一些常用的布局技巧。
定位流主要有三种，一是相对定位，二是绝对定位，三是固定定位；下面我们一一进行分析。
相对定位
相对定位就是相对于自己以前在标准流中的位置来移动；
写法：
position: relative;
示例程序：
<style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; } .box1{ background-color: red; } .box2{ background-color: green; position: relative; top: 20px; left: 20px; } .box3{ background-color: blue; } <style> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div>
ps：
-
- 在相对定位中同一个方向上的定位属性只能使用一个相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
- top/bottom 只能用一个
- left/right 只
能用一个
- 在相对定位中同一个方向上的定位属性只能使用一个相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
-
- 由于相对定位是不脱离标准流的, 所以在相对定位中区分块级元素/行内元素/行内块级元素
- 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局，如下图：
相对定位一般用于盒子位置的微调：
input{
200px;
height: 50px;
}
img{
100px;
height: 50px;
position: relative;
top: 20px;
}
跟后面学习的绝对定位配合使用，下面再详细了解。
绝对定位
绝对定位就是相对于body或者某个定位流中的祖先元素来定位。
写法：
position: absolute;- 这是定位前的样子：
示例代码：
-
<style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; } .box1{ background-color: red; } .box2{ background-color: green; position: absolute; left: 0; top: 0; } .box3{ background-color: blue; } </style> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div>
定位后的样子：
-
分析定位前后的变化，我们可以得出以下几点结论： -
- 绝对定位的元素是脱离标准流的, 不会占用标准流中的位置
- 由于绝对定位的元素是脱离标准流的, 所以绝对定位的元素不区分块级元素/行内元素/行内块级元素
- 如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点
- 相对于body定位会随着页面的滚动而滚动
- 一个绝对定位的元素会忽略祖先元素的padding，例如：
<style> *{ margin: 0; padding: 0; } .box1{ width: 300px; height: 300px; background-color: red; border: 10px solid #000; padding: 30px; position: relative; box-sizing: border-box; } .box2{ width: 100px; height: 100px; background-color: green; position: absolute; left: 0; top: 0; } </style> <div class="box1"> <div class="box2"></div> </div>
那么，绝对定位到底是相对于谁来定位呢？我们来仔细研究一下：
-
- 默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点
- 如果一个绝对定位的元素有祖先元素, 并且祖先元素中有一个是定位流中的元素, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
- 如果一个绝对定位的元素有祖先元素, 并且祖先元素中有多个是定位流中的元素, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点
示例代码：
<style> *{ margin: 0; padding: 0; } .box1{ width: 300px; height: 300px; background-color: red; position: relative; } .box2{ width: 200px; height: 200px; background-color: green; } .box3{ width: 100px; height: 100px; background-color: blue; position: absolute; left: 0; bottom: 0; } </style> <div class="box1"> <div class="box2"> <div class="box3"></div> </div> </div>
效果图：
绝对定位大多配合相对定位来使用，一般不会单独出现。
固定定位
固定定位可以让某个盒子不随着滚动条的滚动而滚动。
写法：
position: fixed;- 示例代码：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>74-固定定位</title> <style> *{ margin: 0; padding: 0; } p{ width: 100px; } a{ width: 50px; height: 50px; background-color: rgba(0, 0, 0, 0.3); border-radius: 25px; text-decoration: none; text-align: center; color: #000; position: fixed; right: 10px; bottom: 10px; } </style> </head> <body> <p>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</p> <a href="#">^<br>顶部</a> </body> </html>
示例图片：
ps：
- 固定定位的元素是脱离标准流的, 不会占用标准流中的位置
- 由于固定定位的元素是脱离标准流的, 所以绝对定位的元素不区分块级元素/行内元素/行内块级元素
固定定位应用场景:
-
- 网页对联广告
- 网页头部通栏(穿透效果)
- 回到顶部按钮
子绝父相
前面说过相对定位和绝对定位都是一起出现, 很少单独使用。
那么为什么要这样呢，先看示例的代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>71-子绝父相</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 ul{ 12 800px; 13 height: 50px; 14 background-color: red; 15 list-style: none; 16 margin: 0px auto; 17 margin-top: 100px; 18 } 19 li{ 20 100px; 21 /*height: 50px;*/ 22 line-height: 50px; 23 float: left; 24 background-color: gray; 25 text-align: center; 26 } 27 .li03{ 28 background-color: darkgray; 29 position: relative; 30 } 31 ul li img{ 32 /* 33 缺点以前的位置仍然被占用, 不能让文字居中对齐 34 */ 35 /*position: relative; 36 left: -35px; 37 top: -15px;*/ 38 /* 浏览器调整之后位置会发生变化*/ 39 /* position: absolute; 40 top: 95px; 41 left: 535px;*/ 42 position: absolute; 43 left: 37px; 44 top: -5px; 45 } 46 </style> 47 </head> 48 <body> 49 <ul> 50 <li>服装城</li> 51 <li>美妆馆</li> 52 <li>京东超市</li> 53 <li class="li03">全球购<img src="hot.png" alt=""></li> 54 <li>闪购</li> 55 <li>团购</li> 56 <li>拍卖</li> 57 <li>江哥</li> 58 </ul> 59 </body> 60 </html>
相对定位：
绝对定位：
子绝父相：
ps：
- 相对定位和绝对定位一般都是用来做覆盖效果的, 当看到某个元素覆盖在另外一个元素上时, 第一时间就要想到定位流。
- 例如一下效果：
是不是要收广告费，哈哈哈。到这里就结束啦，下周见。