定义:
定位:是一种高级的布局手段
作用:
通过position属性设置定位
可选值:
static 默认值,没有开启定位
开启定位:
relative 开启相对定位
absolute 开启绝对定位
fixed 开启固定定位
sticky 开启粘滞定位
relative 开启相对定位
特点
a:开启相对定位之后,如果不配合偏移量使用,元素是没有任何变化
b:相对定位的原点,就是元素原来在文档流中的位置
c:开启相对定位后,元素的层级提高了
d:开启相对定位,元素的性质不会发生改变,块还是块,行内还是行内,
也就是说元素没有脱离文档流
偏移量
偏移量:
left 相对定位位置左侧的偏移量
right 相对定位位置右侧的偏移量
top 相对定位位置上侧的偏移量
bottom 相对定位位置下侧的偏移量
一般情况下,水平方向的偏移量,垂直方向的偏移量,只用一个值确定,不会同时使用两个值,容易出问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box {
width: 600px;
height: 600px;
border: 5px solid rgb(56, 56, 56);
}
.box1 {
width: 200px;
height: 200px;
background-color: red;
}
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
/* 开启相对定位 */
position: relative;
left: 400px;
/* right: 50px; */
top: 200px;
/* bottom: 200px; */
/* top: -100px; */
}
.box3 {
width: 200px;
height: 200px;
background-color: green;
}
.s1 {
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
left: 100px;
bottom: 50px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span class="s1">我是一个span</span>
</div>
</body>
</html>
![](https://img-blog.csdnimg.cn/img_convert/2ad553f7fe38aabdbf80bee1ab09b117.png)
position: absolute; 开启绝对定位
特点
开启之后特点:
a:开启绝对定位后,元素就会脱离文档流
b:开启绝对定位后,元素的性质就发生了改变,不再区分块,行内块,行内元素
c:开启绝对定位,元素的层级也会提高
d:绝对定位,如果要元素的位置发生改变,依然需要配合偏移量去使用
e:绝对定位的原点:相对于其包含块来定位的
一般情况下,我们给子元素设置绝对定位,同时也会给父元素设置相对定位,
叫“子绝父相”,但具体情况具体看
包含块:
(1)、在没有定位的情况下,包含块就是离当前元素最近的祖先元素
(2)、有定位的情况,包含块是离它最近的,开启了定位的祖先元素;
如果他的祖先元素都没有开启定位,包含块就是根元素(html),又叫初始包含块
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.outer {
width: 600px;
height: 600px;
border: 5px solid black;
margin: 50px;
position: relative;
}
.box1 {
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
right: 0;
bottom: 0;
}
.box2 {
width: 300px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
![](https://img-blog.csdnimg.cn/img_convert/9a88d8a0d210dcd22832ade78f8c7ed6.png)
position: fixed; 开启固定定位
特点
开启固定定位特点
a:元素会脱离文档流,元素的性质也会发生改变
b:元素会固定在页面当中,不会随着滚动条的滚动而滚动
c:元素的层级也会提高
d:元素位置的改变,也需要配合偏移量去使用
e:固定定位是参考根标签(浏览器视口)来偏移
一般情况下:固定定位常用于,广告、固定导航等
position: sticky; 开启粘滞定位
特点:
a:不会脱离文档流,元素的性质也不会发生改变
b:粘滞定位要配合top值去使用,在没有到达top值之前,元素是随着滚动条滚动而滚动
到达指定的top值后,元素就不会随着滚动条滚动而滚动
c:粘滞定位的偏移量定位点:是浏览器的视口
一般使用场景:广告,导航
绝对元素定位布局
水平布局
left+margin-left+border-left+padding-left+width+
padding-right+border-right+margin-right+right
-当开启绝对定位后,水平方向的布局等式就会加上left,right两个值
此时规则和之前一样,只是多添加了两个值
-当发生过度约束时
1:如果9个值中没有auto,则自动调整right值以使等式满足
0+0+0+0+100+0+0+0+300=400
2:如果有auto,则自动调整auto的值以使等式满足
-可设置auto的值
margin width left right
四个值中,三个值固定,某一个值设为auto,则会调整这个auto值,
若width left right都为0,margin会均分四个方向值
—两个auto的情况
margin 和width为auto, 调整的width
margin 和left,right其中一个值为auto, 调整left/right
width 和left,right其中一个值,调整left/right
left,right都为auto,调整right
—三个auto的情况
margin width left ===> 调整left
margin width right ===> 调整right
width left right ===> 调整right
—四个值auto的情况===> 调整right
总结:
(1)、right>left>width>marign
(2)、在绝对定位的情况下,四个方向偏移量都为0px,宽度也为固定值,让margin为auto,
元素会水平垂直居中