position定位对于布局还是比较重要的，是学习前端必须掌握的东西。那么position定位类型有哪些?怎么使用呢？下面就来说一下，position常用类型的有四种，相对定位、绝对定位、固定定位和粘性定位，我分别介绍一下每种定位类型怎么使用。
一、相对定位relative
relative是生成相对定位的元素，其相对于元素本身进行移动，有left、right、top、bottom四种值，例如向右移动100像素就需要设置left的值。
div{
width: 200px;
height: 200px;
position:relative;
left:50px;
}
结果如下
向上移动50像素设置bottom得到值
div{
width: 200px;
height: 200px;
position:relative;
bottom:50px;
}
一共有四个方向，都可以设置值用来定位，但是一般设置两个就可以实现定位了，例如left和top、right和bottom等。
二、绝对定位absolute
absolute生成绝对定位，参照最近的有使用position的祖先元素进行的定位，脱离文档流，如果没有则参照body进行定位。例如child元素位于parent元素内距左边框100像素，就需要parent元素也有position定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<style>
.parent{
width:400px;
height:300px;
border:1px solid red;
position:absolute;
}
.child{
width:200px;
height:200px;
background-color:blue;
position:absolute;
left:100px;
}
</style>
</head>
<body>
<div class="parent">parent</div>
<div class="child">child</div>
</body>
结果如下
三、固定定位fixed
fixed固定定位是相对于浏览器窗口固定位置，脱离文档流。一般用于广告、客服等，不随着页面一起滚动而是固定在浏览器某个位置。例如页面的返回顶端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<style>
.back{
width:50px;
height:20px;
border:1px solid black;
position:fixed;
right:50px;
bottom:50px;
}
</style>
</head>
<body>
<div class="back">返回</div>
</body>
结果如下，位于页面右下角
四、粘性定位sticky
sticky粘性定位是在一个范围内，没有超出范围时和position:relative一样，如果超出范围则粘在目标位置，和position:fixed一样。例如一个导航栏在超出页面范围时固定在页面顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<style>
.nav{
height:50px;
background-color:royalblue;
position:sticky;
top:0;
}
.txt{
height: 1000px;
}
</style>
</head>
<body>
<div class="nav"></div>
<div class="txt">超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br>超级多内容<br></div>
</body>
</html>
结果如下
position的几种定位就是这些了，还有一种定位是static表示默认定位即没有定位，一般不使用。
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
