前言
CSS 有两个最重要的基本属性,前端开发必须掌握:display和position。一、CSS定位用来解决什么问题?
- 自由位置盒子的摆放
- 网页中拖拉不变位置的盒子
- 可以盖住遮挡其他盒子的盒子
二、CSS定位模式
1.静态定位(static)
(具有标准流特性 几乎相当于无定位 )
代码如下:
.box{
position: static;
}
2.相对定位(relative)
特点:
- 以原来的位置为基准移动
- 原来位置仍然保留,不会被其他盒子占用
未添加相对定位前的代码以及效果图:
.box1 {
width: 400px;
height: 400px;
margin: auto;
background-color: aquamarine;
}
.box2{
width: 200px;
height: 200px;
}
进行相对定位后的代码以及效果:
.box1 {
width: 400px;
height: 400px;
margin: auto;
background-color: aquamarine;
}
.box2 {
position: relative;
left: 20px;
top: 20px;
width: 200px;
height: 200px;
background-color: bisque;
}
此时box2的上方和左方有20px的间距
此时若有第三个盒子,第三个盒子的位置不会被占,因为相对定位的位置仍然保留。
示意图如下:
3.绝对定位(absolute)
特点:
- 以最近以及的父元素为基准
- 没有父元素或者父元素没有定位,以浏览器为基准。
- 绝对定位不再占有原先的元素
.box1 {
width: 400px;
height: 400px;
margin: auto;
background-color: aquamarine;
}
.box2 {
position: absolute;
left: 20px;
top: 20px;
width: 200px;
height: 200px;
background-color: bisque;
}
此时父元素box1没有定位,box2以浏览器边缘为基准进行定位,如图
若其父元素没有定位,父元素的父元素有定位,则按照最近一级的有定位的父元素为基准,并且其一旦添加相对定位,则其位置会被侵占。如图。
4.固定定位(fixed)
1.以浏览器可视图为基准点
2.与父元素无关
3.不占用原先位置
.box2 {
position: fixed;
right: 5px;
width: 200px;
height: 200px;
background-color: cornflowerblue;
}
body {
height: 5000px;
background-color: blueviolet;
}
如图
利用固定定位可以实现 例如页面两侧的广告,购物车按钮,搜索按钮等功能。
总结
定位中有一种使用非常多的技巧:子绝父相;
子元素使用绝对定位,可以使子元素在父元素中的位置可变,并且不再占有原先的位置;父元素使用相对定位,可以使父元素在整个布局中的位置不被占有,保持页面的整体性,即:可以实现在一定约束下的自由。