前言
在前面的学习中，我们已经知道可以使用块元素以及浮动属性来进行宏观上的页面布局，但是如果涉及比较高精度的位置要求，可能就需要引入
position来帮我们来解决微观层面的具体位置问题了。
一、定位(position)的介绍
定位是一种更加高级的布局手段，通过定位可以将元素摆放到页面的任意位置-使用position属性来设置定位
| 可选值 | 效果 |
|---|---|
| static | 元素是静止的没有开启定位 |
| relative | 开启元素的相对定位 |
| absolute | 开启元素的绝对定位 |
| fixed | 开启元素的固定定位 |
| sticky | 开启元素的粘滞定位 |
二、static
static为元素默认的定位方式，即没有定位
<head>
<meta charset="UTF-8">
<title>定位：static</title>
<style>
#root1,#root2,#root3{
width: 200px;
height: 200px;
}
div:first-child{
background-color: teal;
}
div:nth-child(2){
background-color: wheat;
position: static;
}
div:last-child{
background-color: tomato;
}
</style>
</head>
<body>
<div id="root1"></div>
<div id="root2"></div>
<div id="root3"></div>
</body>
static是position属性的默认值
三、relative 相对定位
（一）相对定位的使用
相对定位是css中使用的比较频繁的定位方式，作用是相对于某个参照物的位置进行偏移，那么参照物到底指的是什么呢？
答案是未偏移前元素自身的位置。也就是说相对定位条件下，left：20px就是元素需要在原有位置上向右偏移20个像素点（或者说相同部位距离原部分的左侧20px）。在相对定位模式中，我们可以使用偏移量(offset)来改变元素的位置：
- top：定位元素和定位位置上边的距高
- bottom：定位元素和定位位置下边的距离
定位元素垂直方向的位置由top和bottom两个属性来控制，通常情况下我们只会使用其中之一， top值越大，定位元素越向下移动- bottom值越大，定位元素越向上移动
- left：定位元素和定位位置的左侧距离
- right：定位元素和定位位置的右侧距高
定位元素水平方向的位置由left和right两个属性控制，通常情况下只会使用一个
参考下面的例子，通过使用相对定位的方式来实现粉色方块的排序
image.png
添加下面的css后，就可以实现方块的有效位移了（a:hover只是作为特殊效果显示，可以不加）
a:hover{
background: deepskyblue;
}
#a2{
position: relative;
left: 200px;
top: -100px;
}
#a4{
position:relative;
left: 100px;
top: -200px;
}
#a5{
position: relative;
left: 200px;
bottom: 200px;
}
image.png
注意：相对定位元素经常被用来作为绝对定位元素的容器块。
（二）相对定位的特点:
1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何的2.相对定位是参照于元素在文档流中的位置进行定位的
3.相对定位会提升元素的层级
4 .相对定位不会使元素脱离文档流
5.相对定位不会改变元素的性质块还是块，行内还是行内
四、绝对定位 Absolute
（一）了解包含块(containing block )的概念
由于绝对定位的参考对象使用到了包含块的概念，所以这里我们可以先来了解一下什么是包含块？
正常情况下：
包含块就是离当前元素最近的祖先块元素
绝对定位情况下：
包含块就是离它最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位则根元素就是它的包含块
（二）绝对定位的使用
绝对定位可以理解为通过坐标（top，buttom，left，right）来进行精准定位。绝对定位的元素的位置相对于其包含块决定的，如果元素没有已定位的父元素，那么它的位置相对于<html>:
- 那么绝对定位和相对定位有什么不同呢
最大的不同在于是否脱离文档流。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间（也就是说元素没有脱离标准文档流）。因此，移动元素会导致它覆盖其它框。而当一个DIV块的位置被定义为绝对定位的时候，也就意味着它失去了文档流的位置，后面的文档流会紧跟着补上来接替。
用相对定位的案例来演示
image.png
css样式需要变为：
div{
width: 300px;
height: 300px;
border: black 2px solid;
padding: 3px;
}
a{
width: 100px;
height: 100px;
background: pink;
display: block;
text-align: center;
line-height: 100px;
text-decoration: none;
position: absolute;
}
a:hover{
background: deepskyblue;
}
#a1{
/* a1不需要移动，所以不进行偏移*/
}
#a2{
left: 211px;
top: 13px;
}
#a3{
left: 11px;
top: 213px;
}
#a4{
left: 111px;
top: 113px;
}
#a5{
left: 211px;
top: 213px;
}
image.png
如果父元素div中有指定的定位方式的话，那么绝对路径的参照物就不再是html，而是以父元素为准进行绝对路径的偏移。
为了凸显这个特点，在父元素div块中进行的向右300px的偏移
div{
width: 300px;
height: 300px;
border: black 2px solid;
padding: 3px;
position: relative;
left: 300px
}
a{
width: 100px;
height: 100px;
background: pink;
display: block;
text-align: center;
line-height: 100px;
text-decoration: none;
position: absolute;
}
a:hover{
background: deepskyblue;
}
#a2{
top: 3px;
left: 203px;
}
#a3{
top: 203px;
left: 3px;
}
#a4{
top: 103px;
left: 103px;
}
#a5{
top: 203px;
left: 203px;
}
image.png
（三）绝对定位的特点
1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化
2.开启绝对定位后，元素会从文格流中脱离
3.绝对定位会改变元素的性质,行内变成块，块的宽高被内容撑开
4.绝对定位会使元素提升一个层级
5.绝对定位元素是相对于其包含块进行定位的
五、fixed定位
fixed定位方式也十分常见，fixed定位的元素位置，相对于浏览器窗口是固定位置。也就是说，一旦定位确定，不管浏览器上下滑动，元素的位置保持不变。这种定位方式通常用来做一些菜单栏或者放回顶部的按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
position: fixed;
top: 50px;
right: 5px;
}
</style>
</head>
<body>
<div>
返回顶部
</div>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>
</html>
image.png
六、粘性定位 sticky
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
image.png
七、开启定位下的水平布局和垂直布局
（一）水平布局
left + margin-left + border-left + padding-left + width + padding-right + margin-right + right = （父）包含块宽度
当我们开启了绝对定位后：水平方向的布局等式就需要添加left和 right两个值，此时规则和之前一样只是多添加了两个值。当发生过度约束时，如果9个值中没有auto则自动调整right值以使等式满足（这里需要需要，调整的不再是margin-right属性了）；如果有auto，则自动调整auto的值以使等式满足
因为left和 right的值默认是auto，所以如果等式不满足时，则会自动调整这两个值。所以在绝对定位下，如果想要使元素居中，就要使right和left为0， margin-left和margin-right为auto。
（二）垂直布局
垂直方向布局的等式的也必须要满足
top + margin-top/bottom + padding-top/bottom + border-top/bottom + bottom = （父）包含块的高度
我们可以看一下下面这个案例
<head>
<meta charset="UTF-8">
<title>绝对定位下的水平居中</title>
<style>
#root{
width: 400px;
height: 400px;
border: solid tomato 10px;
position: relative;
}
#box{
width: 200px;
height: 200px;
border: wheat solid 10px;
position: absolute;
/* 设置水平居中 */
margin-right: auto;
margin-left: auto;
right: 0;
left: 0;
/* 设置垂直居中 */
margin-top: auto;
margin-bottom: auto;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div id="root">
<div id="box"></div>
</div>
</body>
绝对定位下子元素在父元素中垂直居中
网友评论