使用Position的方式来进行定位
程序员文章站
2022-04-25 11:38:15
...
一，position的常用值
| 值 | 描述 |
|---|---|
| static | 自动定位 |
| relative | 相对于自己原来的位置来定位(自恋型) |
| absolute | 相对于父亲的位置来定位(拼爹型) |
| fixed | 相对于浏览器的固定位置(认死理型) |
二，position之static定位
概述：static方式是position的默认定位模式。在该模式下无法使用top、left、right、bottom来进行移动元素。
该定位的唯一作用就是：取消定位
三，position之relative定位（自恋型）
概述：relative方式，会以元素原来的位置为基准，然后在这个基准下，通过top、left、bottom、right进行定位。并且它依然会占据原来位置的空间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试position的relative定位</title>
<style type="text/css">
.one{
position:relative;
top:100px;
left:100px;
width:200px;
height:200px;
background-color:#FF8888;
}
.two{
width:200px;
height:200px;
background-color: #FFFF00;
}
.three{
width:200px;
height:200px;
background-color: #00DDAA;
}
</style>
</head>
<body>
<!--relative方式，会以元素原来的位置为基准，然后在这个基准下，
通过top、left、bottom、right进行定位。并且它依然会占据原来位置的空间 -->
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
四，position之absolute定位(拼爹型)
概述：
①当父层没有使用position来定位的时候，那么子层就会以整个网页作为基准，
通过top、left、bottom、right进行定位。完全不会再占据空间
②当元素的祖先层时使用position定位的时候，那么子元素会根据祖先层的位置
来进行定位，通过top、left、bottom、right来进行定位。完全不会再占据空间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试position的absolute定位之父层没有position</title>
<style>
.father {
width: 300px;
height: 300px;
background-color: #E93EFF ;
margin: 0 auto;
}
.son1 {
width: 200px;
height: 100px;
background-color: #668800
;
position: absolute;
top: 200px;
left: 50px;
}
.son2 {
width: 200px;
height: 100px;
background-color: #660077;
position: absolute;
top: 220px;
left: 60px;
}
</style>
</head>
<body>
<!--当父层没有使用position来定位的时候，那么子层就会以整个网页作为基准，
通过top、left、bottom、right进行定位。完全不会再占据空间-->
<div class="father">
<div class="son1">
</div>
<div class="son2">
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试position的absolute定位之父层有position</title>
<style>
.father {
width: 300px;
height: 300px;
background-color: #0000AA;
margin: 0 auto;
position: relative;
}
.son {
width: 200px;
height: 100px;
background-color: #FFFF77;
position: absolute;
top:200px;
left:100px;
}
</style>
</head>
<body>
<!--当元素的祖先层时使用position定位的时候，那么子元素会根据祖先层的位置来进行定位，
通过top、left、bottom、right来进行定位-->
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
五，position之fixed定位(认死理型)
概述：使用position的fixed定位，它会固定在某一个位置，不会随滚动条的滚动而改变位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试position的fixed定位</title>
<style>
.ad {
width: 100px;
height: 100px;
background-color: red;
position: fixed;
top: 100px;
}
</style>
</head>
<body>
<!--使用position的fixed定位，它会固定在某一个位置，不会随滚动条的滚动而改变位置-->
<div class="ad">
这是一块不管你怎么滚动都会在同一位置的内容
</div>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
<p>定位测试</p>
</body>
</html>
六，控制叠放次序(z-index)
概述：对多个元素同时设置定位时，定位元素之间可能会发生重叠。我们可以使用z-index来控制重叠的优先级。z-index的值越大，其优先级越大。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试叠放次序中调整z-index显示的优先级</title>
<style type="text/css">
.father{
position:absolute;
width:500px;
height:500px;
background-color: blue;
top:50px;
left:100px;
z-index: 20;
}
.child{
position: absolute;
width: 500px;
height:500px;
background-color: red;
top:100px;
left:150px;
z-index: 30;
}
.theSmallestChild{
position:absolute;
width: 500px;
height: 500px;
background-color: yellow;
top:150px;
left:200px;
z-index: 10;
}
</style>
</head>
<body>
<div class="father">
</div>
<div class="child">
</div>
<div class="theSmallestChild">
</div>
</body>
</html>
参考之：https://blog.csdn.net/yongqianbao4519/article/details/80949323
上一篇： position属性及z-index属性