文章目录
- 前言
- 一、了解定位
- 二、偏移量
- 1.了解偏移量
- 2.定位的使用
- 2.1 相对定位以及绝对定位
- 2.2固定定位
- 总结
前言
定位在前端css中是一大重点,定位的出现是我们的前端布局变得非常方便快捷,它的作用就是控制元素在包含块中的精准位置,非常的简单粗暴。
一、了解定位
定位属性position:
static:默认值,表示常规流定位
relative:相对定位,不会导致元素脱离文档流,只是让元素在原来的位置进行偏移
absolate:绝对定位,会让元素脱离文档流,不占据页面位置,且会使元素变为块盒
fixed:固定定位,也会脱离文档流,但包含快为浏览器可视窗口
只要元素的position取值不是static,那么这个元素就是定位元素
只有给了绝对定位和固定定位的元素才会脱离文档流。
二、偏移量
1.了解偏移量
脱离了文档流的元素通过偏移量来调整它在页面的位置:
left:向左移动
right:向右移动
top:向上移动
bottom:向下移动
我们在页面当中使用定位一般是在调整二级菜单,导航栏等位置使用,也会使用固定定位来制作页面中的固定导航。
2.定位的使用
2.1 相对定位以及绝对定位
首先我们新建一个html文件,用三个不同颜色的盒子来做示范:
.box {
width: 500px;
height: 500px;
background-color: green;
}
.top {
width: 100px;
height: 100px;
background-color: red;
}
.button {
width: 200px;
height: 200px;
background-color: blue;
}
<div class="box">
<div class="top"></div>
<div class="button"></div>
</div>
浏览器显示:
此时可以看见,红盒和蓝盒被绿盒包裹,也就是说绿盒是红盒以及蓝盒的父元素,那么我们要调整红盒蓝盒的位置就需要给绿盒相对定位,给红蓝绝对定位:
.box {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
.top {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
right: 110px;
bottom: 70px;
}
.button {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
left: 30px;
top: 100px;
}
此时:
可以看见红蓝两盒的位置发生了改变。
2.2固定定位
固定定位的代码写法与绝对定位相似,但是他的包含块只会是浏览器的可是窗口,也就是说它只会随着窗口的变化而变化,且永远在窗口的同一位置。
总结
定位在制作网站时使用可以说是很频繁的,但是因为定位元素脱离文档流的特性也会对布局产生影响,所以我们在使用时也需要小心。
更多推荐
菜鸟教程:定位的使用
发布评论