目录
定位属性
需要使用position这个属性
然后这里来说一下它的属性值。
| 值 | 描述 |
|---|---|
| static(默认值) | 按照正常文档进行定位，设置了top、right、bottom、left属性也不会生效。 |
| relative | 相对于它在正常文档中的位置进行定位，通过设置top、right、bottom、left属性，可以使元素相对于其正常位置进行移动。 |
| absolute | 相对于最近已定位的(不是static)父元素进行定位。如果不存在已定位的父元素，则相对于最初的包含块(通常是html元素)进行定位。 |
| fixed | 相对于浏览器窗口进行定位，即使页面滚动，它也会保持在窗口的固定位置。 |
| sticky | 根据用户的滚动位置在容器中定位。它的行为是基于用户的滚动情况，当元素到达容器的顶部或底部时，它将保持在容器的顶部或底部，否则将表现为relative |
1.static属性
static默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的。
以块级标签为例
格式如下
div {
position: static;
}
具体代码
<!--position属性值为static时-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background-color: chartreuse;
position: static;
left: 10px;
top: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
这里我设置了left和top这个两个属性，但是它不会生效
效果如图
2.relative属性
设置了此属性的对象会遵循正常文档流，但将依据top、right、bottom、left等属性在正常文档流中偏移位置，而其层叠通过z-index属性定义。
以块级标签为例
格式如下
div {
position: relative;
top: 20px;
left: 30px;
}
具体代码如下
<!--position属性值为relative-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background-color: chartreuse;
position: relative;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果如图
3.absolute属性
1.相对于定位的祖先元素：元素的位置是相对于其最近的已定位的祖先元素。如果没有已定位的祖先元素，那么元素的位置将相对于最初的包含块。
2.脱离正常文档流：被设置为absolute的元素脱离了正常的文档流，不再占据文档中的位置。其他元素会像它不存在一样，他也不会影响其他元素的布局。
3.通过top、right、bottom、left进行定位：使用top、right、bottom、left属性，可以调整元素相对于其定位的祖先元素的位置。
以块级标签为例子
代码格式
div{
position: absolute;
top: 20px;
left: 10px;
}
具体代码
<!--position属性为absolute-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background-color: chartreuse;
position: absolute;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div class="a"><div class="b"></div>
</div>
</body>
</html>
效果如图
4.fixed属性
使用此属性的对象会脱离正常文档流，使用top、right、bottom、left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。
理论上被设置为fixed的元素会被定位与浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
常见的固定有如下的
我的浏览器搜索框就是一直固定在最上面，论我怎么滑动它也不会动。
然后以div标签为例子
格式
position: fixed;
具体代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.a{
height: 1800px;
width: 1800px;
background-image: url("小黄人2.jpg");
}
.b{
height: 50px;
width: 50px;
background-color: green;
position: fixed;
bottom: 100px;
right: 30px;
left: 400px;
top: 350px;
}
</style>
</head>
<body>
<div class="a">
</div>
<div class="b">固定不移动</div>
</body>
</html>
效果如图
