一、static定位
没有定位,遵循正常的文档流对象,不会受到 top, bottom, left, right影响。
.static {
position: static;/*默认*/
width: 100px;
height: 100px;
border: 3px solid #73AD21;
}
二、相对定位
相对该元素原本文档流的位置进行定位,且原本的位置保留。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box1,.box2,.box3{
display: flex;
align-items: center;
justify-content: center;
}
.box1 {
width: 100px;
height: 100px;
border: 1px solid #73AD21;
}
.box2{
position: relative;/*相对定位*/
width: 100px;
height: 100px;
border: 1px solid yellow;
top: 100px;
left: 100px;
}
.box3{
width: 100px;
height: 100px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="box1">盒子一</div>
<div class="box2">盒子二</div>
<div class="box3">盒子三</div>
</body>
</html>
如果说:将盒子二的定位模式改为默认
很明显,相对定位是相对于原本文档流的位置进行定位的,且原有位置是保留的,其他元素无法占用。至于具体定位规则在下面会具体解释。
三、绝对定位
绝对定位是相对于父组件(前提是该组件是相对、绝对、固定定位的),如果父组件不是相对定位的,则继续向上找,直到找到顶级组件(浏览器)进行定位。且父组件位于那一层,则子组件就位于那一层。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>绝对定位</title>
<style>
.box1{
width: 400px;
height: 400px;
border: 1px solid red;
}
.box2{
position: relative;/*相对定位*/
width: 300px;
height: 300px;
border: 1px solid yellow;
top: 50px;
left: 50px;
}
.box3{
position: absolute;/*绝对定位*/
width: 200px;
height: 200px;
border: 1px solid green;
top: 50px;
left: 50px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">//父组件
<div class="box3">//子组件
</div>
</div>
</div>
</body>
</html>
根据规则,box2是box3的父组件,所以定位是相对于box2进行定位的。
如果说:把box1作为box3的父组件时(box1为相对定位,box3为绝对定位,box2为默认)。 为了效果更明显,box2设置外边框为50px,其他条件不变
很明显:是相对于box1进行定位的。
如果说找不到对应的父组件时,父组件为浏览器
解释:父组件位于那一层,则子组件就位于那一层
<style>
.box1{
width: 400px;
height: 400px;
background-color: red;
}
.box2{
position: relative;
width: 300px;
height: 300px;
background-color: yellow;
top: 50px;
left: 50px;
z-index: -1;/*层数*/
}
.box3{
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
background-color: green;
}
</style>
<div class="box1">
<div class="box2">
<div class="box3">
</div>
</div>
</div>
box3的背景颜色很明显没有显示出来,因为其父组件在-1层。而box1默认在第0层所以显示不了。改变子组件的层数也是一样的。
此时应该修改父组件的层数使其超过上一个盒子的层数
四、固定定位
参照物是浏览器,且原有位置(文档流位置)被消除,其他元素会忽略它的存在。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
position: fixed;
width: 100%;
height: 20px;
background-color: yellowgreen;
top: 100px;
left: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
五、sticky定位
该定位是介于相对定位和绝对定位之间
元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div.sticky {
position: sticky;
top: 0;
/*阈值*/
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>顶部</p>
<div class="sticky">我是粘性定位!</div>
<div style="padding-bottom:2000px">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div>
</body>
</html>
超过阈值时
六、定位规则
步骤一:选定参照物
- 相对定位:文档流
- 绝对定位:处在浮游层的父组件
- 固定定位:浏览器
步骤二:选取参考点(一般通过本身元素查找)
举例(绝对定位):
<head>
<meta charset="utf-8" />
<title>绝对定位</title>
<style>
.box1{/*父组件*/
position: relative;
width: 400px;
height: 400px;
border: 1px solid red;
}
.box2{
width: 300px;
height: 300px;
border: 1px solid yellow;
margin: 50px;
}
.box3{/*子组件*/
position: absolute;
width: 200px;
height: 200px;
border: 1px solid green;
/*
* 通过下面可得参照点是父组件的左上角
* 找到父组件的左上角后,
* 如果值是负的,则沿父组件对应边的反方向运动对应距离,正则相反。
* (比如top:50px;left: 50px;)
* 已知参照点为左上角,因为是top,且该值为正,故沿边方向移动(向下)移动50px
* left,向右移动50px。
* 此时,做延长线,相交点即为子组件的左上角,然后通过子组件的width,height绘制。
*/
top: 50px;/*上*/
left: 50px;/*左*/
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
</div>
</div>
</div>
</body>
</html>
其他的定位方法都一样的,只要找对参照物及参照点及可。
注意:
上面的第二部分相对定位中,看图片很明显,第二个盒子的一条边与第三个盒子的边右重叠,这是因为盒子我定义了有边框为1px,所以实际的盒子长度要加上边框的长度。