HTML连载57-相对定位和绝对定位
一、定位流
1.分类
(1)相对定位;
(2)绝对定位
(3)固定定位
(4)静态定位
2.什么相对定位
相对定位就是相对于自己以前在标准流中的位置来移动。
例子:
<style> div{ width:100px; height:100px; } .box1{ background-color: red; } .box2{ background-color: yellow; } .box3{ background-color: blue; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body>
现在修改box2的属性
.box2{ background-color: yellow; position:relative;/*相对流不会脱离标准流*/ top:20px; left:20px; }
3.注意:
(1)相对流不会脱离标准流
(2)在相对定位中同一个方向上的定位属性只能使用一个
(3)由于相对定位是不脱离标准流的,所以在相对定位中是区分块级元素/行内元素/行内块级元素
(4)由于相对定位是不脱离标准流的,并且相对定位的元素会占用标准流中的位置,所以当给相对定位的元素设置margin/padding等属性时会影响到标准流的布局。(也就是设置了margin/padding属性的时候,会把原来标准流中的位置进行相应调整,而相对位置会等标准流设置好了再进行生效)
(5)position:relative;经常忘记设置。
.box2{ background-color: yellow; position:relative;/*相对流不会脱离标准流*/ top:20px; left:20px; margin-top: 20px; }
4.相对定位的应用场景
(1)用于对元素进行微调,比如:各种标签一起使用的时候,由于标签的差异,需要进行对齐,使用相对定位会更加简便。
(2)配合后面学习的绝对定位进行使用
二、绝对定位
1.什么是绝对定位
绝对定位就是相对于body来定位的。
先来一个基础的代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D150_AbsolutePositoning</title> <style> div{ width:100px; height:100px; } .box1{ background-color: red; } .box2{ background-color: yellow; /*position:absolute;*/ } .box3{ background-color: blue; } span{ width:100px; height:100px; background-color: purple; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <span>我是行内块级元素在绝对定位中的作用的</span> </body> </html>
2.绝对定位注意点
(1)绝对定位的元素是脱离标准流的
.box2{ background-color: yellow; position:absolute; }
(2)绝对定位的元素是不区分块级元素/行内元素/行内块级元素的。
span{ width:100px; height:100px; background-color: purple; position:absolute; }
(3)这个绝对定位优点类似于浮动流
.box2{ background-color: yellow; position:absolute; right:0px; bottom:0px;
三、源码:
D148_RelativePositioning.html
D150_AbsolutePositoning.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D148_RelativePositioning.html
https://github.com/ruigege66/HTML_learning/blob/master/D150_AbsolutePositoning.html
2.CSDN:https://blog.csdn.net/weixin_44630050
3.博客园:https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流,后台回复“礼包”获取Java大数据学习视频礼包
HTML连载57-相对定位和绝对定位的更多相关文章
- 详解CSS的相对定位和绝对定位
CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...
- css之position相对定位和绝对定位
一.position的四个值:static.relative.absolute.fixed. 绝对定位:absolute和fixed统称为绝对定位 相对定位:relative 默认值:static 二 ...
- CSS中相对定位与绝对定位
看了几个讲解定位的博客,觉得还不错,分享之: 博客一:http://blog.sina.com.cn/s/blog_4bcf4a5e010008o0.html 文章中,主要需要参考的有两点: 1,相对 ...
- CSS中的相对定位和绝对定位
1.元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的, 使用相 ...
- 【HTML+CSS】浅谈:相对定位与绝对定位
相对定位和绝对定位 ·定位标签:position ·包括属性:relative(相对) absolute(绝对) 1.position:relative; 假设对一个元素进行相对定位.首先它将出如今 ...
- CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位
其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学习. 通过我们前面的学习,我们网页布局方法: ...
- 内联元素于与块元素的转换 相对定位、绝对定位以及fixed定位 Z轴覆盖
今天上午学习了内联元素于与块元素的转换 个人觉的display:none将元素非常好用,可以配合当鼠标放到这里会出现. 转换成行内元素display: inline; 转换成块元素displ ...
- 微信小程序 - 相对定位和绝对定位 - 相对路径和绝对路径
微信小程序 - 相对定位和绝对定位 相对定位relative,绝对定位absolute 相对定位:元素是相对自身进行定位,参照物是自己. 绝对定位:元素是相对离它最近的一个父级元素进行定位. 相对定位 ...
- css position相对定位与绝对定位彻底搞懂
定位position position本身就有给...定位的意思 position属性的值: static ---默认值 relative ---相对定位 absolute ---绝对定位 fixed ...
- Web—12-详解CSS的相对定位和绝对定位
CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...
随机推荐
- golang开发环境配置
下载安装 从 https://golang.org/dl/ 下载最新的安装包. windows直接执行exe,按指示进行安装(默认安装目录是:C:\Go) linxu解压后复制到你喜欢目录就行(一般放 ...
- C#Windows Forms (Demo.SYS)--xdd
private void Show_background_picture()//随机更换背景 { ";//默认值 Random ran = new Random(); , );//返回一个1 ...
- linux bash编程之函数和循环控制
函数:实现独立功能的代码段 函数只有在调用时才会执行 语法一: function F_NAME{ 函数体 } 语法二: F_NAME() { 函数体 } 函数的返回值: 默认函数返回值:函数执行状态返 ...
- 网络OSI七层模型以及数据传输过程
网络OSI七层模型 模型图 国际标准化组织(ISO)制定了osi七层模型,iso规定了各种各样的协议,并且分了7层 每一层的详细信息 具体7层 数据格式 功能与连接方式 典型设备 应用层 Applic ...
- unicode和utf-8编码区别
以前使用Python2,一直为中文烦恼,也不知道为什么开头就要声明#coding=utf-8,后来用了Python3,发现就不用这样了,还是想彻底弄懂下这是为什么. 先讲asc码 每个 ASC码占一 ...
- ASP.NET Core3.X 终端中间件转换为端点路由运行
引言 前几天.NET Core3.1发布,于是我把公司一个基础通用系统升级了,同时删除了几个基础模块当然这几个基础模块与.NET Core3.1无关,其中包括了支付模块,升级完后静文(同事)问我你把支 ...
- 在文件夹下所有文件中查找字符串(linux/windows)
在linux下可以用 grep "String" filename.txt#字符串 文件名grep -r "String" /home/#递归查找目录下所有文件 ...
- 如何彻底理解Java抽象类 为什么要用抽象类 什么情况下用抽象类
如何彻底理解Java抽象类 为什么要用抽象类 什么情况下用抽象类 呐,到底什么是抽象类,有时明明一个普通类就可以解决了,为啥非得整个抽象类,装逼吗 我曾带着这样的疑惑,查了很多资料,看了很多源码,写了 ...
- 转:java 解析excel,带合并单元的excel
收集了一些对博主有帮助的博文,如下 >>>>>>>>>>>第一部分: 首先,mavn导入jar包 <!-- 解析excel需要导 ...
- luogu P1712 [NOI2016]区间
题目描述 在数轴上有 n个闭区间 [l1,r1],[l2,r2],...,[ln,rn].现在要从中选出 m 个区间,使得这 m个区间共同包含至少一个位置.换句话说,就是使得存在一个 x,使得对于每一 ...