一、定位流
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大数据学习视频礼包
如对本文有疑问, 点击进行留言回复!!
清除新版Google Chrome浏览器中表单控件(input,button...)默认的黑色边框
荐 20200714——git/mac配置/项目运行步骤/一些报错
antd 菜单组件 使用时报错:Cannot read property ‘isRootMenu‘ of undefined
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来
硬件仪表盘账号建立指导(一) --WHQL认证测试结果提交账号(一)
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系
网友评论