定位
概述
在前端web开发中所谓文档流【页面中标签排列方式】:如果想打破文档流让标签可以在任意地方显示,需要进行定位;
分类
定位在前端开发中三种:固定定位、相对定位、绝对定位
固定定位
无论怎么滑动页面,都不会改变该元素在屏幕的位置
举例:百度百科右边的分享栏,无论怎么下滑页面,还是存在屏幕的固定位置
实现代码:
.box{
/* 固定定位:固定定位元素不占起始位置 */
position: fixed;
}
举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
div{
width:400px;
height: 200px;
}
body{
height: 10000px;
}
.box{
/* 固定定位:固定定位元素不占起始位置 */
position: fixed;
left:500px;
top:200px;
background:red;
}
.box1{
background:green;
}
.box2{
background:purple;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
相对定位
相对定位也可以让元素脱离文档流,元素在进行相对定位的时候,其实相对的起始位置进行偏离,它是相对于自己的起始位置发生的偏移,而且还需要注意:相对定位元素起始位置值占用的。
举例:绿色方块是相对红色方块产生了相对位移,因此紫色方块不能够往红色方块边上靠
实现代码:
.box2{
position: relative;
}
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
/* 清除默认样式:默认情况下有缝隙 */
*{
margin:0;
padding: 0;
}
div{
width:400px;
height: 200px;
}
.box1{
background:red;
}
.box2{
position: relative;
left:400px;
top:200px;
background:green;
}
.box3{
background:purple;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
绝对定位
绝对定位也可以让元素脱离标准文档流:
- 绝对定位元素,如果没有定位父元素【绝对定位元素:参照页面进行偏移】
- 绝对定位元素,如果有定位父元素【绝对定位元素:参照定位父元素进行偏移】
注意:绝对定位元素不占起始位置(别人可以占用起始位置)
举例:红色方块是相对于整个页面产生的位移偏转,所以紫色方块会补齐缺失的那一行,紧靠绿块
实现代码:
.cur{
position: absolute;
}
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
/* 子绝父相*/
*{
margin:0;
padding: 0;
}
.box{
position: relative;
width:600px;
height: 400px;
background:red;
border:1px solid black;
left:200px;
}
.cur{
position: absolute;
left:0px;
top:0px;
width:300px;
height:400px;
background:cyan;
}
.cur1{
position: absolute;
width:300px;
height:200px;
left:300px;
top:0px;
background:purple;
}
.cur2{
position: absolute;
width:300px;
height:200px;
background:yellow;
left:300px;
top:200px;
}
</style>
</head>
<body>
<div class="box">
<div class="cur"></div>
<div class="cur1"></div>
<div class="cur2"></div>
</div>
</body>
</html>
重点原则
在前端开发中,很多时候都会遵循一个原则:子绝父相(子标签是绝对定位,父标签是相对定位)