css深入理解之absolute

一、absolute和float有相同的特性，包裹性和破坏性

1、absolute和float的相似(看下面的demo，如果图片在左上角，那么用float和absolute都一样)

  1   2   3   4   5   6   7  80  81  82  83 
 84      87     
 88         @@##@@ 89         
 90             慕课网 91             @@##@@ 92             #慕课网活动#【全民晒课ing，火速赢取IT图书】无论你是慕课网的“资深粉丝”，还是刚加入的新同学，在慕课网活动帖：http://www.php.cn/ 写下你在慕课网所学习的任意一门课程，并附上课程的学习心得，就有机会赢得精品IT好书。@@##@@这事很急哒，仅有2天呦。在#程序员节#送给自己一份礼物吧！@@##@@ 93             
@@##@@
 94             
     95                     96                     9月13日 10:27  97                     来自微博 weibo.com                       98                  99                 100                     @@##@@(4)|101                     转发(5)|102                     收藏|103                     评论(2)104                 105             
106         
107     
108     
109         
float: left;
110         
position: absolute;
立即学习“前端免费学习笔记（深入）”；
111     
112 
113 158 159 

OEmarry婚嫁电子商务系统免费版

OEmarry婚庆商家电子商务网站系统（又名：OEmarry婚嫁O2O电商平台系统）是O.E研发团队继OElove婚恋网站产品发布之后经长期的深入调研策划后，根据婚庆行业客户实际应用需求而提供的一套以满足企业级（OEPHP MVC架构）大型数据架构及大规模运营需求的解决方案，该系统的集商家展示点评、O2O团购、垂直搜索、分类导行、本地信息、优惠券、商家活动、在线购物、微信营销、广告管理、手机app

下载

View Code

2、破坏性

 1  2  3  4  5  6  7 18 19 20 21 
@@##@@
22 23 39 40 

View Code

3、包裹性

 1  2  3  4  5  6  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  6 35 36 37 38 
39     40     @@##@@41     @@##@@42 
43 44 

View Code

滑动滚动条的时候，关闭按钮不移动，因为设置了absolute

四、absolute实际使用

1、图片图标绝对定位覆盖

上面图片里面的Hot、推荐、vip都是用absolute实现的，而且没有用relative

 1  2  3  4  5  6 28 29 30 31 
32     
33         
34             
35                 课程36             
37             
38                 问答39             
40             
41                 42                     求课43                 44             
45         
46     
47 
48 49 
50     
51         
52             53                 
54                     推荐55                     @@##@@vip57                 
58                 
分享：CSS深入理解之float浮动
59                 
60                     已完结61                     3514人学习62                 
63             64         
65     
66 
67 68 

View Code

2、下拉框定位

用的是无依赖绝对定位，就是只用了absolute，没有用relative

 1  2  3  4  5  6 26 27 28 29 
30     
31         
32         
33             
34                 
分享：CSS深入理解之float浮动
35                 
案例：CSS圆角进化论
36                 
案例：CSS Sprite雪碧图应用
37                 
案例：CSS3 3D 特效
38                 
案例：如何用CSS进行网页布局
39             
40             41             搜索42         
43     
44 
45 98 99 

View Code

 3、居中、边缘定位

实现图片居中和边缘定位的一种思路，可以用无限制的absolute，里面用了 和absolute的跟随性，注意代码中的 ，这个很重要

 1  2  3  4  5  6 27 28 29 30 
31     
32         
33             
34             
35             
36             
37             
38             
39         
40         
41              @@##@@42         
43         
44              
45                 46                 47                 48             
49         
50     
51 
52 53 

View Code

 4、文件图片对其与定位

实际项目中，有的地方有星星，有的没有，想要对其文字比较麻烦，就可以用无依赖的absolute

邮箱前面的图标，以及超出框的文字，都可以用无依赖的absolute

它给页面的布局提供了一种新的思路

 1  2  3  4  5  6 27 28 29 30 
31     
注册
32     
33         
34             
35                 *登录邮箱36                 
37                     38                         邮箱格式不准确（演示）39                     40                 
41             
42             
43                 *登录密码44                 
45                     46                         请输入6-16位密码，区分大小写，不能使用空格47                     48                 
49             
50             
51                 *用户昵称52                 
53                     54                 
55             
56             
57                 手机号码58                 
59                     60                 
61             
62             
63                 *验 证 码64                 
65                     @@##@@66                 
67             
68             
69                  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中文网！