CSS 定位布局 - 相对、绝对、固定三种定位
仅供学习,转载请注明出处
文档流
文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置。
关于定位
我们可以使用css的position属性来设置元素的定位类型,postion的设置项如下:
relative 生成相对定位元素,元素所占据的文档流的位置保留,元素本身相对自身原位置进行偏移。
absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位。
fixed 生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位。
static 默认值,没有定位,元素出现在正常的文档流中,相当于取消定位属性或者不设置定位属性。
inherit 从父元素继承 position 属性的值。
定位元素的偏移
定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。
看了上面关于定位的一些概念,下面就可以手写几个示例来看看。
relative 相对定位的示例
relative 生成相对定位元素,元素所占据的文档流的位置保留,元素本身相对自身原位置进行偏移。
首先使用三个div来看看文档流部署的情况,如下:
从上面的三个div来看,就是正常的文档流布局的情况,绿色的div直接再黄色的div上方,而黄色由于有绿色的div占据了上面的文档流布局的位置,导致黄色被挤到了下方。
而相对定位的布局是不会影响文档流布局的。假设我想要使用相对定位对绿色的div进行偏移,那么就是根据绿色div的文档流布局的位置进行相对偏移的。
假设想要达到上图的偏移效果,该怎么做呢?
从代码看出,只要在绿色div的样式属性设置了position:relative;
之后,就可以使用left
和 top
设置与原来文档布局位置的偏移量。
实现代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.outside{width: 500px;height: 600px;border: 1px solid #000;margin: 50px auto 0;}.outside div{width: 200px;height: 100px;}.box1{background-color: green;position: relative;left: 50px;top: 50px;}.box2{background-color: gold;}</style>
</head>
<body><div class="outside"><div class="box1"></div><div class="box2"></div></div>
</body>
</html>
absolute绝对定位示例
absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位。
在上面相对定位的示例中,元素相对定位是基于文档流原来的位置进行偏移定位的。那么,绝对定位是基于什么的呢?
将刚才关于设置相对定位的代码改为绝对定位看看。
当设置绿色的div为绝对定位之后,发现黄色的div不见了。
其实,黄色的div并不是不见了,而是跟绿色的div重叠了。因为当绿色div设置为绝对定位之后,就会脱离文档流布局,此时绿色的div就相当于漂浮了起来,黄色的div就没有被绿色div挤下来,自然就上去与绿色div重叠在一起了。
那么下面来设置一下偏移看看。
此时绿色的div并不是基于最外层的div进行偏移的,简单来看是根据浏览器进行偏移的,也就是body。
这是为什么呢?可以放大浏览器再来看看绿色div的偏移,可能更加直观。因为上面我缩放了浏览器的宽度一半。
那么为什么绿色的div是与body进行偏移呢?因为绿色div的父级元素外层div没有设置定位。
如果我给外层div设置一下绝对定位,或者相对定位,是不是就可以以外层的div进行偏移呢?
先给外层div设置相对定位来看看:
好了,从浏览器的呈现来看,设置相对定位就可以让绿色div以外层div进行相对偏移。下面再来看看绝对定位。
父元素div设置了绝对定位之后,的确绿色div就以外层div进行偏移了。但是同时父级div也与body进行了定位,需要重新设置偏移量才可以居中。
但是这样写死肯定很不方便,所以还是直接用相对定位比较合适。
fixed固定定位
fixed 生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位。
上面已经测试使用了绝对定位,绝对定位基本是与父级元素进行偏移定位的。那么fixed固定定位按照描述应该就直接是基于body进行偏移定位的。
那么这个怎么去验证呢?先看看原来基于父级定位的绝对定位的div情况如下:
将绿色div的绝对定位改为固定定位,如下:
从上面的结果来看,固定定位是完全不管父级元素是否设置了定位属性的,直接就与body进行定位偏移。
这种定位方式最适合用于放广告了。
定位元素层级 z-index
定位元素是浮动的正常的文档流之上的,可以用z-index属性来设置元素的层级。
为什么需要元素的层级呢?例如当在做一个弹框的时候,需要弹框不被其他任何元素覆盖,那么则可以设置弹框的元素的层级为最高即可。
下面写个示例来理解一下:
从上图可以看出最后写的红色div就是层级最高的,没有被其他div覆盖。
实现代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.outside{width: 500px;height: 500px;border: 1px solid #000;margin: 50px auto;position: relative;}.outside div{width: 200px;height: 200px;position: absolute;}.box1{background-color: blue;left: 20px;top:20px;}.box2{background-color: green;left: 40px;top:40px;}.box3{background-color: pink;left: 60px;top:60px;}.box4{background-color: red;left: 80px;top:80px;}</style>
</head>
<body><!-- div.outside>(div.box$)*4 --><div class="outside"><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div></div>
</body>
</html>
那么如果,我想要将第一个蓝色div不被覆盖,那么就可以设置蓝色div的层级为10(因为默认元素的层级小于10)
当然,如果设置弹框不知道其他元素的层级到底多少,则可以设置999之类的最大数值即可,那样就不用被其他元素覆盖了。
定位元素特性
绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素。
理解练习
制作如下布局:
首先写两个div出来,如下
将数字5的div定位到第一个div的右上角
设置圆角属性
border-radius: 14px;
这里的 14px 代表圆半径就是 14px。所以,设置后div直接就是一个圆了。
那么下面看看外部的大div设置圆角会怎么样?
可以看出只要设置的圆角半径小于div的长宽,就是一个小圆角的形状。
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.outside{width: 100px;height: 100px;background-color: gold;margin: 50px auto;position: relative;border-radius: 14px;}.box1{width: 28px;height: 28px;background-color: red;color: #fff;text-align: center;line-height: 28px;position: absolute;right: -14px;top: -14px;border-radius: 14px;}</style>
</head>
<body><div class="outside"><div class="box1">5</div></div>
</body>
</html>
2019年全套Java、Android、HTML5前端、Python、大数据视频,价值数万资源大放送
寻找资源的地址如下:
扫描微信公众号
寻找价值数万的视频资源
CSS 定位布局 - 相对、绝对、固定三种定位相关推荐
- 一键学会三种定位布局,相对定位、绝对定位、固定定位!
定位布局 定位属性: position 作用: 指定元素的定位类型 取值:static 默认不定位相对定位绝对定位固定定位 相对定位 关键字 position:relative 特点:相对不脱离文档流 ...
- html5边框顶格,CSS 三种定位方式以及格式化上下文详解 》 html5jscss
常规流( Normal flow ) 之称之为常规流,是因为这是相对于后面的浮动和绝对定位的一个概念,浮动和绝对定位元素都脱离了当前的常规流. 在 CSS2.1中,常规流包括块框( block box ...
- html本文框百分比定位,HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点...
1 . 相对定位relative:顾名思义,相对定位是相对于自己的位置来进行偏移,如下图: 以盒子中心为基准,为每条边的正方向,例: 向右移动20px : 代码为left:20px;或者right:- ...
- 【高精度定位】关于GPS、RTK、PPK三种定位技术的探讨
高精度定位通常是指亚米级.厘米级以及毫米级的定位,从市场需求来看,定位的精度越高往往越好."高精度.低成本"的定位方案无疑将是未来市场的趋势. 在物联网时代,大多数的应用或多或少都 ...
- Android 的三种定位方式
转载自:http://blog.csdn.net/luosiye312/article/details/50562309#comments Android 定位大致分为三大类:GPS定位:Networ ...
- 百度地图三种定位方式测试(高精度、低功耗、仅用设备)
百度地图三种定位方式测试(高精度.低功耗.仅用设备) Android定位SDK自v7.0版本起,按照附加功能不同,向开发者提供了四种不同类型的定位开发包,可根据不同需求,自有选择所需类型的开发包使用. ...
- 无线基站定位服务器,UWB定位技术的三种定位方法
原标题:UWB定位技术的三种定位方法 UWB定位技术也称超宽带技术,与传统的窄带系统相比,具有穿透力强.功耗低.抗多径效果好.安全性高.系统复杂度低.能提供精确定位等优点.因此,超宽带技术可以应用于室 ...
- 服务器安装系统提示无法创建新的系统分区,Win10系统安装时提示无法创建新的系统分区也无法定位现有的分区的三种解决方法...
部分用户在安装Windows10系统时,却遇到"无法创建分区也找不到现有的分区"提示,无法继续安装.这该怎么办呢?对于该问题大家可以参考以下方法来解决. 1.格式化整个硬盘,重新分 ...
- html按钮disabled状态,CSS定义input disabled样式的三种方法
表单提交的时候我们经常会让提交按钮禁用,满足条件后按钮恢复,disabled禁用按钮后怎么用CSS来改变禁用disabled按钮的样式呢?下面看青岛星网:CSS定义input disabled样式的三 ...
最新文章
- 追寻大师的脚步 | 张正友忆华人计算机视觉宗师 Thomas S. Huang
- 小知识一、让Swift继续用OC#warning效果
- 后量子密码芯片研究取得重大突破,论文入选ISSCC 2022和CHES 2022
- 如何利用数据分析买到好房子?
- springMVC rest风格
- 界面设计方法(2)— 6.功能按钮设计(删除,保存,提交)
- 研华运动控制卡接线图_研华运动控制卡 SoftMotion 技术简介
- 蓝桥杯 ALGO-93 算法训练 反置数
- java使用javax.mail包发送电子邮件:设置账号、密码、主题、文本、附件
- 一条命令关掉centos所有不必要的服务和端口号
- 【渝粤教育】国家开放大学2018年秋季 0299-22T中国古代文学(1) 参考试题
- 初级工程师该如何去学习,如何去研发开关电源?
- 股票自动交易软件API使用流程
- 电脑坏掉之后,Oracle数据恢复
- java 编程题 实现双色球抽奖游戏中奖号码的生成
- Windows10电脑进行拨号连接时,无法共享热点?如何解决?多次尝试后,终于解决了。
- Python AngryBirds完整代码+讲解
- ThinkPHP微信小说小程序源码-自带采集带安装教程
- 【Node】一个完整的 node addon 实现流程
- 写作的意义,从一枚勋章开始