相对定位
现在有如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width:200px;
height:200px;
background-color:#bfa;
}
.box2{
width:200px;
height:200px;
background-color:orange;
}
.box3{
width:200px;
height:200px;
background-color:red;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
现在想实现这个效果：
可以通过margin来实现：
.box1{
width:200px;
height:200px;
background-color:#bfa;
}
.box2{
width:200px;
height:200px;
background-color:orange;
margin-left:200px;
margin-top:-200px;
}
.box3{
width:200px;
height:200px;
background-color:red;
margin-top:200px;
}
显然有一点麻烦，因为box2移动的时候，box3由于box2上去了，有一行没有地方被占就会跟着上去，所以box3也要设置margin-top
现在可以用定位来解决这个问题
通过定位，可以将一个元素摆放在页面的任意位置
使用position属性来使用定位
可选值：
-
static:默认值，元素是静止的，没有开启定位 -
relative:开启元素相对定位（定位点：元素在文档流中位置） -
absolute:开启元素绝对定位（定位点：包含块的左上角（包含块就是当前元素最近的祖先块元素绝对定位的包含块：离他最近的开启了定位的祖先元素（所以box4，box5开启了定位，相对于box2，离他最近的开启了定位的就是box5，如果所有祖先元素都没有开启定位，则根元素就是他的包含块，html就是一个根元素，是初始包含块））） -
fixed：开启元素固定定位（定位点：浏览器视口） -
sticky:开启元素粘滞定位（定位点：元素在文档流中位置，但是不会随着拖动而消失（客服按钮就是粘滞定位））
position：relative相对定位
相对定位的特点：
-
元素开启相对定位后，如果不设置偏移量，元素不会发生任何的变化
-
偏移量：offset
-
可以通过偏移量来设置元素位置
-
可选值：
-
top:定位元素和定位位置上边的距离（可以决定垂直位置）比如现在，我想要box2往下走，开启相对定位：
定位不会影响其他元素（如果这里使用了
margin-top，那么box3也会一起往下走了） -
right定位元素和定位位置右边的距离，值越大，越向左 -
left定位元素和定位位置左边的距离，值越大，越向右 -
bottom：定位元素和定位位置下边的距离，值越大，越向上
-
-
-
相对定位会提升元素的层级（如果定位的位置地方有元素，他就会比此位置的元素高一级（即会覆盖他））
-
相对定位不会使用元素脱离文档流
-
相对定位不会改变元素的性质（块和行内），即使定位改变了，该独占一行的还是会独占一行（灵魂出窍）
定位元素垂直方向由top和bottom两个属性控制，一般只会使用其中一个。right和left同理
所以，用定位来解决此问题：
只需修改box2就可以：
.box2{
width:200px;
height:200px;
background-color:orange;
position:relative;
left:200px;
top:-200px;
}
定位元素就是box2，那么定位位置是谁？
网页的坐标轴是这样的：
现在我们把box2的left和right设为0，发现：
box2的定位位置就是红点的位置，这正是元素在文档流中的定位
left:200px就是box2离红点（定位位置）横向距离有200px
绝对定位
但元素的position属性设置为position:abolute时，就开启了绝对定位
position:abolute绝对定位
绝对定位的特点
-
开启绝对定位后，如果不设置偏移量，元素的位置不会变化
-
开启绝对定位后，元素会脱离文档流
-
绝对定位会改变元素的性质
-
绝对定位会使元素提升层级
那么绝对定位的元素的定位位置是哪里呢？
我们同样设置left:0和right:0发现，
现在，box2有一个父元素是box5，box5有一个父元素是box4：
现在我们把box5和box4的定位打开，box2的绝对定位打开：
发现box2的定位位置去到了box5的左上角：
box4开启定位后，box2的定位位置就是box4，box5开启定位后，box2的定位位置就是box5，结论：绝对定位元素是相当于其包含块进行定位
包含块：
-
包含块就是当前元素最近的祖先块元素
-
绝对定位的包含块：离他最近的开启了定位的祖先元素（所以box4，box5开启了定位，相对于box2，离他最近的开启了定位的就是box5，如果所有祖先元素都没有开启定位，则根元素就是他的包含块，html就是一个根元素，是初始包含块）
固定定位
position:fixed固定定位
固定定位也是一种绝对定位，大部分特点都和绝对定位一样，也会脱离文档流，不设置偏移量元素不会变化。。
与绝对定位只有一个不同点：
固定定位永远参照于浏览器的视口进行定位
box2开启固定定位后，设置left:0和top:0，元素去了浏览器左上角，即使box4开启了定位，box2的定位位置也不会相当于box4而变成box4的左上角。
视口就是浏览器的窗口，我们设置body的高度为2000px后，浏览器就会有上下滚动条，当我们对box2设置position:fixed，上下拖动滚动条，box2的位置不会变化，始终在浏览器窗口中。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height:2000px;
}
.box1{
width:200px;
height:200px;
background-color:#bfa;
position:fixed;
left:0;
top:0;
}
.box2{
width:200px;
height:200px;
background-color:orange;
}
.box3{
width:200px;
height:200px;
background-color:red;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
固定定位的元素不会随着滚动条滚动，用于将元素固定到视口中。
粘滞定位
兼容性不太好，可以当做了解。
可以用来做客服按钮或者广告~
当元素开启粘滞定位后，粘滞定位和相对定位基本一致，不同的是粘滞定位可以在元素到达某个位置时讲起固定。
试试这个代码：(上次的导航条联系，对nav标签开启position:sticky和top:0)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../03_layout/css/reset.css">
<style>
body{
height:2000px;
}
/*设置nav大小*/
.nav{
width:1210px;
height:40px;
background-color:#E8E7E3;
margin:100px auto;
position:sticky;
top:0px;
}
.nav li{
float:left;
/*li的高度如果设置了line-height就可以不用写了*/
height:40px;
/*将元素在父元素中垂直居中*/
line-height:40px;
}
.nav a{
display:block;
text-decoration:none;
color:#777777;
font-size:18px;
padding:0 39px;
}
.nav a:hover{
background-color:#3F3F3F;
color:#E8E7E3;
}
.nav li:last-child a{
padding:0 39px 0 52px;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">HTML/CSS</a>
</li>
<li>
<a href="#">Brower Side</a>
</li>
<li>
<a href="#">Server Side</a>
</li>
<li>
<a href="#">Programming</a>
</li>
<li>
<a href="#">XML</a>
</li>
<li>
<a href="#">Web Building</a>
</li>
<li>
<a href="#">Reference</a>
</li>
</ul>
</body>
</html>
绝对定位元素布局
开启绝对定位后，水平方向的布局等式就需要加上两个值left和right
发生过度约束时（加一起不满足），如果9个值没有auto，这自动调整right值使等式满足
如果有auto，这自动调整auto的值使等式满足，
可以设置成auto的值：margin,width,left,right
这样也可以实现元素水平居中：
而垂直方向布局的等式也必须满足，top + margin_top/bottom + padding-top/bottom + border-top/bottom + height = 包含块高度
也是和水平方向的满足等式规则一样，谁是auto就改谁，都没有auto则调right
让元素在包含块中间：
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
