前面说过浮动，关键在一个"“浮”上面，而定位，关键则在于一个"位"上面。
前端学习之浮动
PS:定位在CSS中算是数一数二的难点，但是，务必要学好它。我们的CSS离不开定位，特别是后面的js特效，天天和定位打交道。不要抵触定位，反而要爱上它，它可以让我们工作更加轻松哦~
为什么要用定位？
如果要实现某个东西能够随便在一个盒子里自由随意移动、或压着某个元素、或超出某个盒子等等，这一类用标准流或者浮动，实现会比较复杂或者难以实现，此时我们用定位来做，just soso~
元素的定位属性
元素的定位属性主要包括定位模式和边偏移两部分。
- 边偏移（即告诉盒子要往哪边走，上下左右）
| 边偏移属性 | 描述 |
|---|---|
| top | 顶端偏移量，定位元素相对于其父元素上边线的距离 |
| bottom | 底部偏移量，定位元素相对于其父元素下边线的距离 |
| left | 左侧偏移量，定位元素相对于其父元素左边线的距离 |
| right | 右侧偏移量，定位元素相对于其父元素右边线的距离 |
也就是说，以后定位要和这边偏移搭配使用。比如，top:100px;left；100px;等等
- 定位模式（定位的分类）
在CSS中。position属性用于定义元素的定位模式，其基本语法如下：
选择器{position:属性值；}
position属性的常用值
| 值 | 描述 |
|---|---|
| static | 自动定位（默认定位方式） |
| relative | 相对定位，相对于其原文档流的位置进行定位 |
| absolute | 绝对定位，相对于其上一个已经定位的父元素进行定位 |
| fixed | 固定定位，相对于浏览器窗口进行定位 |
静态定位（static）–默认
静态定位是所有元素默认的定位方式，当position属性的取值为static时，可以将元素定位为静态位置。所谓的静态位置就是各个元素在html文档流中默认的位置。
即网页中所有元素都默认的是静态定位哦~ 其实就是标准流的特性。
在静态定位状态下，无法用过边偏移属性（left、right、top、bottom）来改变元素的位置
√静态定位唯一的用处：取消定位
相对定位（relative）–自恋型即以自己为中心
相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置中。
对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。如下图所示，即是一个相对定位的效果展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
.top{
/*margin:100px;*/
position: relative;
top:100px;
left: 100px;
}
.bottom{
background-color: purple;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
注意：
1.相对定位最重要的一点：它可以通过边偏移移动位置，但是原来所占位置，继续占有。
2.其次，每次移动的位置，是以自己的左上角为基准点（相对于自己来移动）
就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流的方式对待它。（相对位置不脱标）
如果说浮动的主要目的是 让多个块级元素一行显示，那么定位的主要价值就是移动位置，让盒子到我们想要的位置上去。
绝对定位（absolute）–拼爹型
如果文档可以滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。
当position属性的值为absolute时，可以将元素的定位模式设置为绝对定位。
注意：绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
height: 2000px;
}
div{
width: 200px;
height: 200px;
background-color: pink;
}
.top{
position: absolute;
right: 0;
bottom: 0;
}
.bottom{
width: 260px;
background-color: purple;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
绝对定位的对齐准则分为两种：父元素无定位和父元素有定位的情况下，对齐方式不一样。
父亲没有定位
若所有父元素都没有定位，则以浏览器当前屏幕为准对齐如下图；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father{
width: 500px;
height: 500px;
background-color: pink;
margin:100px;
}
.son{
height: 200px;
width: 200px;
background-color: purple;
position: absolute;
top: 50px;
left: 50px;
/* 若所有父元素都没有定位，则以浏览器当前屏幕为准对齐 */
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
父亲有定位
如果父亲有定位，那么绝对定位将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）为准进行定位。
只有一个父元素的嵌套的情况 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father{
width: 500px;
height: 500px;
background-color: pink;
margin:100px;
position: absolute;
}
.son{
height: 200px;
width: 200px;
background-color: purple;
position: absolute;
top: 50px;
left: 50px;
/* 若所有父元素都没有定位，则以浏览器当前屏幕为准对齐 */
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
多重嵌套的情况下父元素有无定位可详细分为以下四种：
祖父和父亲都没有定位的情况下：子元素以浏览器当前屏幕为基准定位
祖父有定位而父亲没有定位的情况下：子元素以祖父为基准定位
祖父没有定位而父亲有定位的情况下：子元素以父亲为基准定位
祖父和父亲都有定位的情况下：子元素以父亲为基准定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.grandfather{
margin:100px;
width: 800px;
height: 800px;
background-color: skyblue;
border: 1px solid skyblue;
position: absolute;
}
.father{
width: 500px;
height: 500px;
background-color: pink;
margin:100px;
position: absolute;
}
.son{
height: 200px;
width: 200px;
background-color: purple;
position: absolute;
top: 50px;
left: 50px;
/* 若所有父元素都没有定位，则以浏览器当前屏幕为准对齐 */
}
</style>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
</html>
注意：绝对定位的子元素取最近的定位父元素为准进行定位
子绝父相
意思是 子级是绝对定位的话，父亲要用相对定位。
首先，我们说下，绝对定位是将元素依据最近的已经（定位、固定、或者相对定位）的父元素（祖先）进行定位。
也就是说，子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位、相对定位，甚至是固定定位都可以）。即子绝父绝，子绝父相都是正确的。
绝对定位是完整意义上的脱标
标准流如下图：
给aaa盒子浮动之后：会发现文字还是在下面一行显示，而不是被压在aaa下面
给aaa盒子绝对定位之后：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
.aaa{
position: absolute;
}
.bbb{
width: 450px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="aaa">aaaaaaaaaaa</div>
<div class="bbb">bbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</body>
</html>
定位的盒子居中对齐
正常情况下，让一个盒子居中，通常只需要给个width,然后设置margin:0 auto;就能左右居中对齐。
但是当一个盒子设置浮动（float）或者绝对定位（position：absolute）时，此时margin:0 auto就不管用了。
定位的盒子也可以水平或垂直居中，有一个算法：
1.首先left: 50%----父盒子的一半大小；
2.然后走(外边距)自己负的一半值就可以了[margin-left:-xxpx(自己宽度值的一半)或者transform: translateX(-50%)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 200px;
background-color: skyblue;
margin:199px auto;
position: absolute;
left: 50%;
margin-left: -150px;
/*transform: translateX(-50%);*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
固定定位（fixed）–认死理型
固定定位是绝对定位的一种特殊形式，类似于正方形是一种特殊的矩形。它以浏览器窗口作为参照物定位网页元素。当position属性取值为fixed时，即可将元素的定位设置为固定定位。
当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定位自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器大小如果变化，该元素都会显示在浏览器窗口的固定位置。
固定定位有两点：
- 固定定位的元素和父元素没有任何关系，只认浏览器；
- 固定定位的元素完全脱标，不占位置，不随着滚动条滚动而滚动；
- IE6等低版本浏览器不支持固定定位。
定位模式转换
跟浮动一样,元素添加了绝对定位和固定定位之后,元素模式也会发生转换,都会转为行内块模式
行内块的宽度和高度和内容有关
因此,比如行内元素 如果添加了绝对定位或固定定位或浮动后,可以不用转换模式,直接给高度和宽度就可以了 。