一、absolute和float有相同的特性,包裹性和破坏性
1、absolute和float的相似(看下面的demo,如果图片在左上角,那么用float和absolute都一样)
1 2 3 4 5 6absolute和float高尔基 7 80 81 82 8384 87
88 @@##@@ 89
90 慕课网 91 @@##@@ 92 #慕课网活动#【全民晒课ing,火速赢取IT图书】无论你是慕课网的“资深粉丝”,还是刚加入的新同学,在慕课网活动帖:http://www.php.cn/ 写下你在慕课网所学习的任意一门课程,并附上课程的学习心得,就有机会赢得精品IT好书。@@##@@这事很急哒,仅有2天呦。在#程序员节#送给自己一份礼物吧!@@##@@ 93
@@##@@
9495 96 9月13日 10:27 97 来自微博 weibo.com 98 99 100 @@##@@(4)|101 转发(5)|102 收藏|103 评论(2)104 105
106 107 108109
110立即学习“前端免费学习笔记(深入)”;
111 112 113 158 159
OEmarry婚庆商家电子商务网站系统(又名:OEmarry婚嫁O2O电商平台系统)是O.E研发团队继OElove婚恋网站产品发布之后经长期的深入调研策划后,根据婚庆行业客户实际应用需求而提供的一套以满足企业级(OEPHP MVC架构)大型数据架构及大规模运营需求的解决方案,该系统的集商家展示点评、O2O团购、垂直搜索、分类导行、本地信息、优惠券、商家活动、在线购物、微信营销、广告管理、手机app
View Code
2、破坏性
1 2 3 4 5 6absolute的破坏性 7 18 19 20 21@@##@@
22 23 39 40
View Code
3、包裹性
1 2 3 4 5 6absolute的包裹性 7 18 19 20 21@@##@@
22 23 39 40
View Code
二、absolute的独立性
absolute使用的时候,不一定非要和relative在一起,可以独立使用,而且它越独立,能力越大
三、absolute特性
1、去浮动
1 2 3 4 5折翼天使表现特性一:去浮动 6 12 13 14 15 @@##@@16 @@##@@17 @@##@@18 19 20 41 42
View Code
2、位置跟随
1 2 3 4 5折翼天使表现特性二:位置跟随 6 14 15 16 17 @@##@@18@@##@@
19 @@##@@20 21 22 50 51
View Code
3.超越overflow
1 2 3 4 5超越overflow 6 35 36 37 38 43 44
View Code
滑动滚动条的时候,关闭按钮不移动,因为设置了absolute
四、absolute实际使用
1、图片图标绝对定位覆盖
上面图片里面的Hot、推荐、vip都是用absolute实现的,而且没有用relative
1 2 3 4 5图标定位二三事 6 28 29 30 3132
33
35 课程36
3738 问答39
4041 42 求课43 44
45 46 47 48 4950
51
52 53
65 66 67 6854 推荐55 @@##@@vip57
58分享:CSS深入理解之float浮动
5960 已完结61 3514人学习62
63 64
View Code
2、下拉框定位
用的是无依赖绝对定位,就是只用了absolute,没有用relative
1 2 3 4 540 41 搜索42 43 44 45 98 99下拉框定位二三事 6 26 27 28 2930
32
View Code
3、居中、边缘定位
实现图片居中和边缘定位的一种思路,可以用无限制的absolute,里面用了 和absolute的跟随性,注意代码中的 ,这个很重要
1 2 3 4 5居中、边缘定位二三事 6 27 28 29 3031
32
33
34 35 36 37 38 39 4041 @@##@@42
4344
49 50 51 52 53
View Code
4、文件图片对其与定位
实际项目中,有的地方有星星,有的没有,想要对其文字比较麻烦,就可以用无依赖的absolute
邮箱前面的图标,以及超出框的文字,都可以用无依赖的absolute
它给页面的布局提供了一种新的思路
1 2 3 4 5文本图标对齐与定位二三事 6 27 28 29 3031
注册
3233
34
35 36
37 38 邮箱格式不准确(演示)39 40
41 4243 44
45 46 请输入6-16位密码,区分大小写,不能使用空格47 48
49 5051 52
53 54
55 5657 58
59 60
61 6263 64
65 @@##@@66
67 6869 70
71 72
73 立即注册74
75 76 77 78 79 80 81
View Code
四、absolute的脱离文档流
动画尽量作用在absolute上,因为absolute是脱离文档流的,这样动画的时候就不会影响其他元素
z-index无依赖 1.如果只有一个绝对定位元素,自然不需要z-index,自动覆盖普通元素; 2.如果两个绝对定位,控制DOM流的前后顺序达到需要的覆盖效果,依然无z-index; 3.如果多个绝对定位交错,非常非常少见,z-index:1控制; 4.如果非弹窗类的绝对定位元素z-index>2,必定z-index冗余,请优化!
更多css深入理解之absolute 相关文章请关注PHP中文网!














