前言
position,让元素显示在某位置中。
一、定位属性与属性值
- position: static;默认值
- position: absolute;绝对定位
- position: relative;相对定位
- position: fixed;固定定位
- position: sticky;粘性定位(兼容性不好)
以上属性值都需要配合top、left、right、bottom来应用。
二、使用效果
1.relative相对定位
我们先在vscode中写入以下代码,可以看到我们在box2中加入了position元素,并定义了top、left值,我们可以看到运行结果:
<!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>Document</title>
<style>
div{
width: 200px;
height: 200px;
}
.box1{
background:red;
}
.box2{
background: blueviolet;
position: relative;
top: 100px;
left: 100px;
}
.box3{
background: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
运行结果为(箭头为后加):
我们可以看到紫色色块相对于左侧,上侧各偏移了100px,可以用负数。
2.absolute绝对定位
我们将上述代码的position属性值改为absolute,运行之后,我们可以看到:
当box2采用了绝对定位时,他所拥有的空间会被腾出,给下一个box。
当两个或多个盒子嵌套时,我们需要给外面的盒子做相对定位,子盒子做绝对定位,这样才能达到我们的效果。
3. fixed固定定位
我们修改style部分代码,如下所示:
<style>
.box1{
width: 100%;
height: 1500px;
background:red;
}
.ad{
width: 100px;
height: 200px;
background-color: aqua;
position: fixed;
right: 0;
bottom: 200px;
}
</style>
运行后查看结果:
拖动滚动条,我们的ad部分是可以跟随滚动的。
4. sticky粘性定位
我们按照以下代码来举例说明:
<!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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.head{
width: 100%;
height: 100px;
background:red;
}
.nav{
width: 500px;
height: 50px;
background-color: aqua;
margin: 0 auto;
position: sticky;
top: 50px;
}
.body{
height: 5000px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div class="head"></div>
<div class="nav"></div>
<div class="body"></div>
</body>
</html>
运行后我们可以看到:
移动滚轮,蓝色box也跟着移动,这就实现了我们的粘连定位。必须要有top值存在,top用来定位什么时候开始粘连。
总结
以上是css中关于定位的知识,详细的区分会在之后讲解,希望对你有所帮助。