C/C++
狂野架构师
IP短视频
JavaEE
鸿蒙应用开发
HTML&JS+前端
Python+大数据开发
人工智能开发
电商视觉设计
软件测试
新媒体+短视频直播运营
产品经理
集成电路应用开发(含嵌入式)
Linux云计算+运维开发
C/C++
拍摄剪辑+短视频制作
PMP项目管理认证
电商运营
Go语言与区块链
大数据
PHP工程师
Android+物联网
iOS
.NET
一,定位介绍
定位的基本思想很简单，它允许你定义元素出现在页面的任何位置. 是通过position属性配合left,right...等来实现的.
二,定位类别
1.相对定位
相对定位就是相对于自己以前在标准流中的位置来移动
语法:
position: relative; 配合left, top, right,bottom等属性使用
3. 特点
- 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
- 在相对定位中同一个方向上的定位属性只能使用一个 eg: left和right, top和bottom
- 由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
- 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素
- 设置margin/padding等属性的时会影响到标准流的布局
2.绝对定位
1. 默认情况下绝对定位就是相对于body来定位
2. 语法
position: absolute; 配合left, top, right,bottom等属性使用
3. 特点
- 绝对定位的元素是脱离标准流的,绝对定位的元素是不区分块级元素/行内元素/行内块级元素
- 如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是 以整个网页的宽度和高度作为参考点
- 默认情况下绝对定位就是相对于body来定位, 但是如果一个绝对定位的元素有祖先(父亲,爷爷)元素, 并且 祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素(最近的祖先)作为参考点
3.固定定位
1. 固定定位可以让某个盒子(元素)不随着滚动条的滚动而滚动
2. 语法
position: fixed; 配合left, top, right,bottom等属性使用
3. 特点
- 固定定位的元素是脱离标准流的, 不会占用标准流中的空间
- 固定定位和绝对定位一样不区分行内/块级/行内块
三, 定位属性的应用
效果
代码实现
<!DOCTYPE html> <html> <head> <meta charset="UTF‐8"> <title> 猫眼电影 </title> <style> * { margin: 0px; padding: 0px; } .box { width: 200px; height: 320px; border:1px solid #cccccc; margin: 0px auto; margin‐top: 50px; position: relative;} .box img { width: 200px; height: 280px; } .box .tip { width: 30px; background‐color: #0084FF; line‐height: 20px; text‐align:center; font‐weight: bold; color: white; font‐size: 14px; font‐style: italic;position: absolute; left: ‐2px; top: 6px; } .box .fileName { width: 60px;line‐height: 40px; color: white; font‐weight: 500; font‐size: 18px; font‐family:宋体; text‐align: center; position: absolute; left: 0px; bottom: 40px; } .box .buyTicket{ width: 200px; line‐height:40px; text‐align: center; display: inline‐block; color: #EF4238; font‐family:宋体; font‐weight: 600; } </style> </head> <body> <div> <img src="img/film.jpg"> <span> 3D </span> <span> 谜巢 </span> <span> 购 票 </span> </div> </body> </html
公众号回复“领取资源01”