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 ...
随机推荐
- Protues7.8仿真软件有中文路径无法正常运行怎么办？
Protues7.8是一款功能强大的单片机仿真软件,在我们的学习生活中经常会用的到,在装软件时明明已经装好了,却不能报错跳出两行红字,让人心痛. 一般都是因为账户名字是中文的问题,这个软件对中文不兼容 ...
- 开源WPF控件库MaterialDesignInXAML推荐
今天介绍一个开源的C# WPF开源控件库,非常漂亮,重点是开源哦 WPF做桌面开发是很有优势的,除了微软自带的控件外,还有很多第三方的控件库,比如收费的Dev Express For WPF.Tele ...
- 转载 C#中DataTable中的Compute方法使用收集
原文: C#中DataTable中的Compute方法使用收集 Compute函数的参数就两个:Expression,和Filter. Expresstion是计算表达式,关于Expression的详 ...
- JavaScript 数组学习总结
类数组转数组 ES5解决方案 let arr = Array.prototype.slice.call(arrlike) ES6解决方案 let arr = Array.from(arrlike) / ...
- 理解Java对象序列化【转】
原文链接:http://www.blogjava.net/jiangshachina/archive/2012/02/13/369898.html 关于Java序列化的文章早已是汗牛充栋了,本文是 ...
- HTML5的一些验证挺方便的
一些基本的验证都可以很简单的实现,节省了很多繁琐的步骤.
- P1035 级数求和
题目描述 已知:S_n= 1+1/2+1/3+…+1/nSn=1+1/2+1/3+…+1/n.显然对于任意一个整数KK,当nn足够大的时候,S_nSn大于KK. 现给出一个整数KK(1 \le k ...
- “洞察千里”，华为云HiLens如何让无人车智行天下
作者:华为云 Rosie 随着人工智能的普及和渗透,"无人"的场景越来越丰富,无人超市.无人车.无人机等已经融入我们的生活. 乘着这股热浪,华为云携手上海交通大学学生创新中心举办了 ...
- .Net core_Excel 导出二维码（以导出箱单为例）
[AccessLogAttribute(Note = "导出条形码箱单 — 条形码")]public ActionResult ExportContract(string INNE ...
- 使用dva改造旧项目的数据流方案
前言 最近在给自己的脚手架项目转到TypeScript时,遇到了一些麻烦. 项目之前采用的是react + react-redux + redux-thunk + redux-actions +re ...