概述
什么是定位布局:
可以通过上下左右四个方位完成自身布局的布局方式
| 定位方式 | 参考系 | 是否脱离文档流 |
|---|---|---|
| 相对定位 | 自身原有位置 | 否 |
| 绝对定位 | 最近’‘定位’'父级 | 是 |
| 固定定位 | 文档窗口 | 是 |
二.相对定位
参考系: 自身原有位置
position: relative ==> 打来了四个定位方向
1. top | bottom | left | right 都可以完成自身布局,上下取上,左右取左
2. left = -right | top = -bottom
3. 布局后不影响自身原有位置
4. 不脱离文档流
三.绝对定位
参考系: 最近的定位父级
position: absolute; ==> 打开四个定位方位
1. top | bottom | left | right 都可以完成自身布局,上下取上,左右取左
2. 父级必须子级设置宽高
3. 一般父级采用的是相对定位布局,一般情况下,父级不需要脱离文档流
4. 完全脱离文档流
四.固定定位
参考系:页面窗口
position: fixed; ==> 打开四个定位方位
1.top | bottom | left | right 都可以完成自身布局,上下取上,左右取左
2.相对于页面窗口是静止的
3.完全脱离文档流
五.z-index
修改显示层级(在发生重叠时使用),值取正整数,值不需要排序,随意规定.
值大的显示层级高
最后
以上就是风趣铃铛为你收集整理的布局------定位布局篇的全部内容，希望文章能够帮你解决布局------定位布局篇所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复