一、定位流
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 chart="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.c入党动机的朴实回答sdn.net/weixin_44630050
3.博客园：https://www.cnblogs.com/ruigege0000/高中教材
4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取java大数据学习视频礼包
本文发布于:2023-04-07 07:38:44，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/bb4b0dcc8f9a449564aefcada97cb587.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：HTML连载57.doc
本文 PDF 下载地址：HTML连载57.pdf
| 留言与评论（共有 0 条评论） |
