相信刚开始学习完css基础很多小白刚进入IT行业,最不能让人忽视的莫过于刚熟悉的定位知识点,今天小编把css定位给大家小结一下.
定位分为:
- 静态定位
- 相对定位
- 绝对定位
- 固定定位
1.静态定位(position: static):(标准流)
特点:
- 静态定位可以理解为标准流
- 设置偏移值无效(默认上下显示,通过方位属性不能移动) `
div{
width: 300px;
height: 300px;
}
.pink{
background-color: pink;
}
.red{
background-color:red;
/* 设置静态定位 */
position: static;
top: 100px;
bottom: 150px;
}
2.相对定位(position: relative):相对于自己之前的位置进行定位
特点:
- 需要配合方位属性实现移动
- 相对于自己原来的位置进行移动
- 在页面中占位置-没有脱标 `
div{
width: 300px;
height: 300px;
}
.pink{
background-color: pink;
position: relative;
bottom: 30px;
left: 20px;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
相对定位效果展示
3.绝对定位(position: absolute):相对于非静态定位的父元素进行定位移动
特点:
- 需要配合方位属性移动位置
- 默认相对于浏览器的可视化区域移动
- 不占位置-脱标 `
div{
width: 300px;
height: 300px;
}
.box1{
background-color: red;
}
.box2{
position: absolute;
top: 200px;
left: 30px;
background-color: blue;
}
.box3{
background-color: pink;
}
绝对定位效果展示
4.固定定位(position: fixed):相对于浏览器进行定位移动代码
特点:
- 需要配合方位属性实现移动
- 相对于浏览器可视区域进行移动
- 在页面中不占位置-已经脱标
.box{
position: fixed;
top: 20px;
left: 30px;
width: 200px;
height: 500px;
background-color: green;
}
固定定位效果展示
