css之absolute

430 0 0

作者:zhaobao1830

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

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

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <meta name="viewport" content="width=device-width">
  6 <title>absolute和float高尔基</title>
  7 <style>
  8 body {
  9     background-color: #B0DEF5;
 10     font-size: 14px; font-family: arial;
 11     color: #444;
 12 }
 13 a {
 14     color: #0078b6;
 15     text-decoration: none;
 16 }
 17 a:hover {
 18     text-decoration: underline;
 19 }
 20 em {
 21     font-style: normal;
 22     color: #aeaeae;
 23     margin: 0 5px;
 24 }
 25 svg {
 26     position: absolute;
 27 }
 28 .container {
 29     width: 560px; height: -webkit-calc(100vh - 16px); height: calc(100vh - 16px);
 30     margin-left: auto; margin-right: auto;
 31     background-color: #fff;
 32 }
 33 .list {
 34     padding: 20px;
 35     position: relative;
 36 }
 37 .space {
 38     padding-left: 60px;
 39     line-height: 22px;
 40 }
 41 .space img {
 42     vertical-align: text-bottom;
 43 }
 44 .info {
 45     font-size: 12px;
 46     overflow: hidden;
 47     color: #808080;
 48 }
 49 .from {
 50     float: left;
 51 }
 52 .from a {
 53     color: #9abbc8;
 54 }
 55 p {
 56     margin: 6px 0;
 57 }
 58 .operate {
 59     float: right;
 60 }
 61 .operate img {
 62     vertical-align: text-bottom;
 63     margin-right: 3px;
 64 }
 65 .test {
 66     position: relative;
 67     font-size: 18px; font-family: 'microsoft yahei';
 68 }
 69 .test p {
 70    width: 200px;
 71    margin-left: auto; margin-right: auto;
 72    padding: 5px;
 73    background-color: #f0f0f0;    
 74 }
 75 .test input {
 76     width: 20px; height: 20px;
 77     vertical-align: -4px;
 78 }
 79 </style>
 80 </head>
 81 
 82 <body>
 83 <div class="container">
 84     <svg xmlns="http://www.w3.org/2000/svg" width="520" height="360">
 85         <path d="M45 80C45 280,45 320,165 300" stroke-width="1" stroke="#444" fill="none"></path>
 86     </svg>
 87     <div class="list">
 88         <a href="#" id="avatar" class="avatar" style="float: left;"><img src="http://img.mukewang.com/54447ac70001f5cc00500050.jpg"></a>
 89         <div class="space">
 90             <a href="//weibo.com/mukewang" target="_blank" title="慕课网">慕课网</a>
 91             <img src="http://img.mukewang.com/54447b1a0001750000160013.png">
 92             <a href="http://huati.weibo.com/k/%E6%85%95%E8%AF%BE%E7%BD%91%E6%B4%BB%E5%8A%A8?from=501">#慕课网活动#</a>【全民晒课ing，火速赢取IT图书】无论你是慕课网的“资深粉丝”，还是刚加入的新同学，在慕课网活动帖：<a href="http://www.imooc.com/wenda/detail/30394">http://www.imooc.com/wenda/detail/30394</a> 写下你在慕课网所学习的任意一门课程，并附上课程的学习心得，就有机会赢得精品IT好书。<img src="http://img.mukewang.com/54447cc700010dbf00220022.gif">这事很急哒，仅有2天呦。在<a href="http://huati.weibo.com/k/%E7%A8%8B%E5%BA%8F%E5%91%98%E8%8A%82?from=501">#程序员节#</a>送给自己一份礼物吧！<img src="http://img.mukewang.com/54447af90001ab1c00010001.gif">
 93             <p><img src="http://img.mukewang.com/54447aea0001f43301200084.jpg"></p>
 94             <div class="info">    
 95                    <span class="from">
 96                     <a href="#">9月13日 10:27</a> 
 97                     <em>来自</em><a href="#">微博 weibo.com</a>                      
 98                 </span>
 99                 <span class="operate">
100                     <a href="javascript:" title="赞"><img src="http://img.mukewang.com/54447c350001055b00120013.png">(4)</a><em>|</em>
101                     <a href="javascript:">转发(5)</a><em>|</em>
102                     <a href="javascript:">收藏</a><em>|</em>
103                     <a href="javascript:">评论(2)</a>
104                 </span>
105             </div>
106         </div>
107     </div>
108     <div class="test">
109         <p><input type="radio" name="layout" id="float" checked><label for="float">float: left;</label></p>
110         <p><input type="radio" name="layout" id="absolute"><label for="absolute">position: absolute;</label></p>
111     </div>
112 </div>
113 <script>
114 var eleAvatar = document.getElementById("avatar"),
115     eleFloat = document.getElementById("float"),
116     eleAbsolute = document.getElementById("absolute");
117 
118 // SVG路径以及相关动画
119 var elePath = document.querySelector("path"), timerPath = null;    
120 var funPathMove = function(end) {
121     clearTimeout(timerPath);
122     var d = elePath.getAttribute("d"), arrD = d.split(" ");
123     // 动画起始值
124     var start = arrD.slice(-1) * 1;
125     if (start == end) return;
126     // 速率
127     var rate = 5, current = start;
128     console.log(arrD);
129     var step = function() {
130         if (Math.abs(end - current) < 1) {
131             current = end;
132         } else {
133             current += (end - current) / 5;
134             timerPath = setTimeout(step, 30);
135         }
136         // 替换最后一个值
137         arrD.splice(-1, 1, current);
138         // 曲线走起
139         elePath.setAttribute("d", arrD.join(" "));
140     };
141     step();
142 };
143 
144 if (eleAvatar && eleFloat && eleAbsolute) {
145     var attrFloat = eleAvatar.style.cssFloat != undefined? "cssFloat": "styleFloat";
146     eleFloat.onclick = function() {
147         eleAvatar.style.position = "";
148         eleAvatar.style[attrFloat] = "left";
149         elePath && funPathMove(300);
150     };
151     eleAbsolute.onclick = function() {
152         eleAvatar.style[attrFloat] = "";
153         eleAvatar.style.position = "absolute";
154         elePath && funPathMove(340);
155     };
156 }
157 </script>
158 </body>
159 </html>

View Code

2、破坏性

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta name="viewport" content="width=device-width">
 6 <title>absolute的破坏性</title>
 7 <style>
 8 .box {
 9     padding: 10px;
10     background-color: #f0f0f0;    
11 }
12 input {
13     position: absolute; top: 234px;    
14     width: 160px; height: 32px;
15     font-size: 100%;
16 }
17 </style>
18 </head>
19 
20 <body>
21 <div class="box"><img id="image" src="http://img.mukewang.com/54447b06000171a002560191.jpg" width="256" height="191"></div>
22 <input id="button" type="button" value="图片absolute化">
23 <script>
24 var eleImg = document.getElementById("image"), eleBtn = document.getElementById("button");
25 if (eleImg != null && eleBtn != null) {
26     eleBtn.onclick = function() {
27         if (this.absolute) {
28             eleImg.style.position = "";
29             this.value = "图片absolute化";
30             this.absolute = false;
31         } else {
32             eleImg.style.position = "absolute";
33             this.value = "图片去absolute";
34             this.absolute = true;
35         }
36     };
37 }
38 </script>
39 </body>
40 </html>

View Code

3、包裹性

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta name="viewport" content="width=device-width">
 6 <title>absolute的包裹性</title>
 7 <style>
 8 .box {
 9     padding: 10px;
10     background-color: #f0f0f0;    
11 }
12 input {
13     position: absolute; top: 234px;    
14     width: 160px; height: 32px;
15     font-size: 100%;
16 }
17 </style>
18 </head>
19 
20 <body>
21 <div id="box" class="box"><img src="http://img.mukewang.com/54447b06000171a002560191.jpg" width="256" height="191"></div>
22 <input id="button" type="button" value="容器absolute化">
23 <script>
24 var eleBox = document.getElementById("box"), eleBtn = document.getElementById("button");
25 if (eleBox != null && eleBtn != null) {
26     eleBtn.onclick = function() {
27         if (this.absolute) {
28             eleBox.style.position = "";
29             this.value = "容器absolute化";
30             this.absolute = false;
31         } else {
32             eleBox.style.position = "absolute";
33             this.value = "容器去absolute";
34             this.absolute = true;
35         }
36     };
37 }
38 </script>
39 </body>
40 </html>

View Code

二、absolute的独立性

absolute使用的时候，不一定非要和relative在一起，可以独立使用，而且它越独立，能力越大

三、absolute特性

1、去浮动

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>折翼天使表现特性一：去浮动</title>
 6 <style>
 7 input[type=button] {
 8     height: 32px;
 9     font-size: 100%;    
10 }
11 </style>
12 </head>
13 
14 <body>
15 <img src="http://img.mukewang.com/54447b06000171a002560191.jpg">
16 <img src="http://img.mukewang.com/54447f4a0001eb7d01910256.jpg">
17 <img src="http://img.mukewang.com/54447f550001ccb002560191.jpg">
18 <p><input type="button" id="float" value="点击第2张图片应用float:left"></p>
19 <p><input type="button" id="button" value="点击第2张图片应用position:absolute"></p>
20 <script>
21 var flbtn = document.getElementById("float"),
22     button = document.getElementById("button"),
23     image2 = document.getElementsByTagName("img")[1];
24 if (flbtn && button && image2) {
25     var value_init = button.value;
26     button.onclick = function() {
27         if (this.value == value_init) {
28             image2.style.position = "absolute";
29             this.value = "撤销";
30         } else {
31             image2.style.position = "";
32             this.value = value_init;
33         }
34     };
35     
36     flbtn.onclick = function() {
37         image2.style["cssFloat" in this.style? "cssFloat": "styleFloat"] = "left";
38     };
39 }
40 </script>
41 </body>
42 </html>

View Code

2、位置跟随

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>折翼天使表现特性二：位置跟随</title>
 6 <style>
 7 input[type=button] {
 8     height: 32px;
 9     font-size: 100%;
10 }
11 p { margin-left: 260px; }
12 img + p { margin-top: 60px; }
13 </style>
14 </head>
15 
16 <body>
17 <img src="http://img.mukewang.com/54447b06000171a002560191.jpg">
18 <div><img src="http://img.mukewang.com/54447f4a0001eb7d01910256.jpg"></div>
19 <img src="http://img.mukewang.com/54447f550001ccb002560191.jpg">
20 <p><input type="button" id="block" value="点击第2张图片应用display:block"></p>
21 <p><input type="button" id="button" value="点击第2张图片应用position:absolute变天使"></p>
22 <script>
23 var block = document.getElementById("block"),
24     button = document.getElementById("button"),
25     image2 = document.getElementsByTagName("img")[1];
26 if (block && button && image2) {
27     var value_init_button = button.value;
28     button.onclick = function() {
29         if (this.value == value_init_button) {
30             image2.style.position = "absolute";
31             this.value = "撤销";
32         } else {
33             image2.style.position = "";
34             this.value = value_init_button;
35         }
36     };
37     
38     var value_init_block = block.value;
39     block.onclick = function() {
40         if (this.value == value_init_block) {
41             image2.style.display = "block";
42             this.value = "撤销";
43         } else {
44             image2.style.display = "";
45             this.value = value_init_block;
46         }    
47     };
48 }
49 </script>
50 </body>
51 </html>

View Code

3.超越overflow

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>超越overflow</title>
 6 <style>
 7 body {
 8     background-color: #bbb;
 9 }
10 .scroll {
11     width: 500px; height: 300px;
12     margin: 200px auto 0;
13     margin-top: -webkit-calc(50vh - 150px);
14     margin-top: calc(50vh - 150px);
15     border: 1px solid #ccc;
16     border-radius: 3px;
17     box-shadow: 0 0 3px rgba(0,0,0,.35);
18     background-color: #fff;
19     overflow: auto;
20 }
21 .close {
22     position: absolute;
23     width: 34px; height: 34px;    
24     margin: -17px 0 0 483px;
25     background: url(http://img.mukewang.com/5444835b000100ce00340075.png) no-repeat;
26 }
27 .close:hover {
28     background-position: 0 -41px;    
29 }
30 img {
31     display: block;
32     margin: 10px;
33 }
34 </style>
35 </head>
36 
37 <body>
38 <div class="scroll">
39     <a href="javascript:" class="close" title="关闭"></a>
40     <img src="http://img.mukewang.com/54447b06000171a002560191.jpg">
41     <img src="http://img.mukewang.com/54447f550001ccb002560191.jpg">
42 </div>
43 </body>
44 </html>

View Code

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

四、absolute实际使用

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

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

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>图标定位二三事</title>
 6 <style>
 7 body { font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; }
 8 body, h3, h5 { margin: 0; }
 9 img { border: 0 none; vertical-align: bottom; }
10 .l { float: left; }.r { float: right; }
11 .constr { width: 1200px; margin-left: auto; margin-right: auto; }
12 .header { background-color: #2A2C2E; }
13 .nav { height: 60px; }
14 .nav-list { float: left; font-size: 14px; font-weight: 400; }
15 .nav-a { display: inline-block; line-height: 20px; padding: 20px 35px; color: #B5BDC0; text-decoration: none; }
16 .nav-a:hover { color: #fff; }
17 
18 .course { padding-top: 10px; }
19 .course-list { float: left; width: 280px; height: 240px; margin: 5px 10px 15px; border-radius: 0 0 1px 1px; background-color: #F7FAF9; background-color: rgba(255,255,255,1); box-shadow: 0 1px 2px #c5c5c5; text-decoration: none; }
20 .course-list-img { background-color: #6396F1; }
21 .course-list-h { line-height: 50px; font-size: 14px; font-weight: 400; color: #363d40; text-align: center; }
22 .course-list-tips { margin: 0 14px; font-size: 12px; color: #b4bbbf; overflow: hidden; }
23 
24 .icon-hot { position: absolute; width: 28px; height: 11px; margin: -6px 0 0 2px; background: url(http://img.mukewang.com/545304730001307300280011.gif); }
25 .icon-recom { position: absolute; line-height: 20px; padding: 0 5px; background-color: #f60; color: #fff; font-size: 12px; }
26 .icon-vip { position: absolute; width: 36px; height: 36px; margin-left: -36px; background: url(http://img.mukewang.com/5453048000015d8800360036.gif); text-indent: -9em; overflow: hidden; }
27 </style>
28 </head>
29 
30 <body>
31 <div class="header">
32     <div class="constr">
33         <div class="nav">
34             <h3 class="nav-list">
35                 <a href="http://www.imooc.com/course/list" class="nav-a">课程</a>
36             </h3>
37             <h3 class="nav-list">
38                 <a href="http://www.imooc.com/wenda" class="nav-a">问答</a>
39             </h3>
40             <h3 class="nav-list">
41                 <a href="http://www.imooc.com/seek/index" class="nav-a">
42                     求课<i class="icon-hot"></i>
43                 </a>
44             </h3>
45         </div>
46     </div>
47 </div>
48 
49 <div class="main">
50     <div class="constr">
51         <div class="course">
52             <a href="http://www.imooc.com/view/121" class="course-list">
53                 <div class="course-list-img">
54                     <span class="icon-recom">推荐</span>
55                     <img width="280" height="160" alt="分享：CSS深入理解之float浮动" src="http://img.mukewang.com/53d74f960001ae9d06000338-300-170.jpg"><!--
56                     --><i class="icon-vip">vip</i>
57                 </div>
58                 <h5 class="course-list-h">分享：CSS深入理解之float浮动</h5>
59                 <div class="course-list-tips">
60                     <span class="l">已完结</span>
61                     <span class="r">3514人学习</span>
62                 </div>
63             </a>
64         </div>
65     </div>
66 </div>
67 </body>
68 </html>

View Code

2、下拉框定位

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

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>下拉框定位二三事</title>
 6 <style>
 7 body { margin: 0; font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; }
 8 .constr { width: 1200px; max-width: 80%; margin-left: auto; margin-right: auto; padding-bottom: 300px; overflow: hidden; }
 9 .course-sidebar { width: 262px; float: left; }
10 .course-sidebar > div { border: 1px solid #e6e8e9; box-shadow: 0px 1px 2px #d5d7d8; background-color: #fff; }
11 .course-sidebar-type { height: 380px; }
12 .course-sidebar-search { margin-top: 20px; overflow: hidden; }
13 .course-search-input { width: 200px; line-height: 18px; padding: 10px; margin: 0; border: 0 none; font-size: 12px; font-family: inherit; float: left; }
14 .course-sidebar-search.focus { border-color: #2ea7e0; }
15 .course-search-input:focus { outline: 0 none; }
16 .course-search-input::-ms-clear { display: none; }
17 .course-search-btn { width: 38px; height: 38px; float: right; background: url(http://img.mukewang.com/545305ba0001f3f600380076.png); text-indent: -9em; overflow: hidden; }
18 .focus .course-search-btn { background-position: 0 -38px; }
19 
20 .course-sidebar-result { display: none; position: absolute; width: 260px; margin: 39px 0 0 -1px; padding-left: 0; list-style-type: none; border: 1px solid #e6e8e9; background-color: #fff; box-shadow: 0px 1px 2px #d5d7d8; font-size: 12px; }
21 .course-sidebar-result > li { line-height: 30px; padding-left: 12px; }
22 .course-sidebar-result > li:hover { background-color: #f9f9f9; }
23 .course-sidebar-result a { display: block; color: #5e5e5e; text-decoration: none; }
24 .course-sidebar-result a:hover { color: #000; }
25 </style>
26 </head>
27 
28 <body>
29 <div class="constr">
30     <div class="course-sidebar">
31         <div class="course-sidebar-type"></div>
32         <div class="course-sidebar-search">
33             <ul id="result" class="course-sidebar-result">
34                 <li><a href="http://www.imooc.com/view/121">分享：CSS深入理解之float浮动</a></li>
35                 <li><a href="http://www.imooc.com/view/118">案例：CSS圆角进化论</a></li>
36                 <li><a href="http://www.imooc.com/view/93">案例：CSS Sprite雪碧图应用</a></li>
37                 <li><a href="http://www.imooc.com/view/77">案例：CSS3 3D 特效</a></li>
38                 <li><a href="http://www.imooc.com/view/57">案例：如何用CSS进行网页布局</a></li>
39             </ul>
40             <input class="course-search-input" placeholder="课程搜索">
41             <a href="javascript:" class="course-search-btn">搜索</a>
42         </div>
43     </div>
44 </div>
45 <script>
46 (function() {
47     var input = document.getElementsByTagName("input")[0],
48         result = document.getElementById("result");
49         
50     if (input && result) {
51         input.onfocus = function() {
52             this.parentNode.className = "course-sidebar-search focus";
53             if (this.value != "") {
54                 // show datalist
55                 result.style.display = "block";
56             }
57         };
58         input.onblur = function() {
59             if (this.value == "") {
60                 this.parentNode.className = "course-sidebar-search";
61             }
62             // hide datalist
63             result.style.display = "none";
64         };
65         
66         // IE7 that wrap a DIV for avoid bad effect from float
67         if (!document.querySelector) {
68             var div = document.createElement("div");
69             input.parentNode.insertBefore(div, input);
70             div.appendChild(result);
71         }
72         // events of datalist
73         if ("oninput" in input) {
74             input.addEventListener("input", function() {
75                 if (this.value.trim() != "") {
76                     result.style.display = "block";
77                 } else {
78                     result.style.display = "none";
79                 }
80             });
81         } else {
82             // IE6-IE8
83             input.onpropertychange = function(event) {
84                 event = event || window.event;
85                 if (event.propertyName == "value" && /focus/.test(this.parentNode.className)) {
86                     if (this.value != "") {
87                         result.style.display = "block";
88                     } else {
89                         result.style.display = "none";
90                     }
91                 }
92             }
93         }
94     }
95 
96 })();
97 </script>
98 </body>
99 </html>

View Code

3、居中、边缘定位

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

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>居中、边缘定位二三事</title>
 6 <style>
 7 body { margin: 0; font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; }
 8 .constr { width: 1200px; max-width: 80%; margin-left: auto; margin-right: auto; }
 9 .course-content { float: right; position: relative; width: 920px; min-height: 1200px; background: #fff; }
10 .course-list-x { padding: 20px 10px; overflow: hidden; }
11 .course-list { float: left; width: 280px; height: 240px; margin: 5px 10px 15px; border-radius: 0 0 1px 1px; background-color: #F7FAF9; background-color: rgba(255,255,255,1); box-shadow: 0 1px 2px #c5c5c5; text-decoration: none; }
12 
13 .goto_top_diaocha, .goto_top_app, .goto_top_feed { display: block; width: 48px; height: 48px; margin-top: 10px; background: url(http://img.mukewang.com/5453076e0001869c01920098.png) no-repeat; }
14 .goto_top_diaocha { background-position: -48px 0; }
15 .goto_top_diaocha:hover { background-position: -48px -50px; }
16 .goto_top_app { background-position: -96px 0; }
17 .goto_top_app:hover { background-position: -96px -50px; }
18 .goto_top_feed { background-position: -144px 0; }
19 .goto_top_feed:hover { background-position: -144px -50px; }
20 
21 .course-loading-x { height: 0; margin-top: 20px; text-align: center; letter-spacing: -.25em; overflow: hidden; }
22 .course-loading { position: absolute; margin-left: -26px; }
23 
24 .course-fixed-x { height: 0; text-align: right; overflow: hidden; }
25 .course-fixed { display: inline; position: fixed; margin-left: 20px; bottom: 100px; }
26 </style>
27 </head>
28 
29 <body>
30 <div class="constr">
31     <div class="course-content">
32         <div class="course-list-x">
33             <div class="course-list"></div>
34             <div class="course-list"></div>
35             <div class="course-list"></div>
36             <div class="course-list"></div>
37             <div class="course-list"></div>
38             <div class="course-list"></div>
39         </div>
40         <div class="course-loading-x">
41             &nbsp;<img src="http://img.mukewang.com/5453077400015bba00010001.gif" class="course-loading" alt="加载中...">
42         </div>
43         <div class="course-fixed-x">
44             &nbsp;<div class="course-fixed">
45                 <a href="http://www.imooc.com/activity/diaocha" class="goto_top_diaocha"></a>
46                 <a href="http://www.imooc.com/mobile/app" class="goto_top_app"></a>
47                 <a href="http://www.imooc.com/user/feedback" class="goto_top_feed"></a>
48             </div>
49         </div>
50     </div>
51 </div>
52 </body>
53 </html>

View Code

4、文件图片对其与定位

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

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

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

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>文本图标对齐与定位二三事</title>
 6 <style>
 7 body { margin: 0; font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; }
 8 a { color: #50B6E5; }
 9 .constr { width: 1200px; margin-left: auto; margin-right: auto; }
10 .regist-head { height: 60px; line-height: 60px; padding-left: 30px; background-color: #be3948; color: #fff; font-size: 18px; }
11 .regist-body { min-height: 400px; padding: 100px 0; background-color: #fff; }
12 .regist-main { width: 600px; margin-left: auto; margin-right: auto; }
13 .regist-group { margin-top: 20px; overflow: hidden; }
14 .regist-label { width: 70px; padding-top: 10px; float: left; }
15 .regist-cell { display: table-cell; *display: inline-block; }
16 .regist-input { height: 18px; line-height: 18px; width: 260px; padding: 10px 5px; margin: 0 10px 0 0; border: 1px solid #d0d6d9; vertical-align: top; }
17 .regist-code-input { width: 130px; }
18 .regist-btn { display: inline-block; width: 160px; line-height: 40px; background-color: #39b94e; color: #fff; text-align: center; text-decoration: none; }
19 .regist-btn:hover { background-color: #33a646; }
20 .icon-warn { display: inline-block; width: 20px; height: 21px; background: url(http://img.mukewang.com/5453084a00016ae300120012.gif) no-repeat center; }
21 
22 .regist-star { position: absolute; margin-left: -1em; font-family: simsun; color: #f30; }
23 .regist-remark { position: absolute; line-height: 21px; padding-top: 9px; color: #666; }
24 .regist-warn { padding-left: 20px; color: #be3948; }
25 .regist-warn > .icon-warn { position: absolute; margin-left: -20px; }
26 </style>
27 </head>
28 
29 <body>
30 <div class="constr">
31     <div class="regist-head">注册</div>
32     <div class="regist-body">
33         <div class="regist-main">
34             <div class="regist-group">
35                 <label class="regist-label"><span class="regist-star">*</span>登录邮箱</label>
36                 <div class="regist-cell">
37                     <input type="email" class="regist-input"><span class="regist-remark regist-warn">
38                         <i class="icon-warn"></i>邮箱格式不准确（演示）
39                     </span>
40                 </div>
41             </div>
42             <div class="regist-group">
43                 <label class="regist-label"><span class="regist-star">*</span>登录密码</label>
44                 <div class="regist-cell">
45                     <input type="password" class="regist-input"><span class="regist-remark">
46                         请输入6-16位密码，区分大小写，不能使用空格
47                     </span>
48                 </div>
49             </div>
50             <div class="regist-group">
51                 <label class="regist-label"><span class="regist-star">*</span>用户昵称</label>
52                 <div class="regist-cell">
53                     <input type="password" class="regist-input">
54                 </div>
55             </div>
56             <div class="regist-group">
57                 <label class="regist-label">手机号码</label>
58                 <div class="regist-cell">
59                     <input type="tel" class="regist-input">
60                 </div>
61             </div>
62             <div class="regist-group">
63                 <label class="regist-label"><span class="regist-star">*</span>验 证 码</label>
64                 <div class="regist-cell">
65                     <input class="regist-input regist-code-input"><img src="http://img.mukewang.com/545308540001678401500040.jpg">
66                 </div>
67             </div>
68             <div class="regist-group">
69                 <label class="regist-label">&nbsp;</label>
70                 <div class="regist-cell">
71                     <input type="checkbox" checked><label>我已阅读并同意<a href="##">慕课协议</a>。</label>
72                     <p>
73                         <a href="javascript:" class="regist-btn">立即注册</a>
74                     </p>
75                 </div>
76             </div>
77         </div>
78     </div>
79 </div>
80 </body>
81 </html>

View Code

五、absolute的脱离文档流

动画尽量作用在absolute上，因为absolute是脱离文档流的，这样动画的时候就不会影响其他元素

  z-index无依赖
  1.如果只有一个绝对定位元素，自然不需要z-index,自动覆盖普通元素；
  2.如果两个绝对定位，控制DOM流的前后顺序达到需要的覆盖效果，依然无z-index；
  3.如果多个绝对定位交错，非常非常少见，z-index:1控制；
  4.如果非弹窗类的绝对定位元素z-index>2,必定z-index冗余，请优化！
六、absolute与width和height的关系
  1、相互替代性
  绝对定位的方向是相互对立的（如：left VS right,top VS bottom）时候，会被拉伸
  要想页面全屏显示，可以用position:absolute,width:100%,height:100%或者position:absolute,top:0,bottom:0,
  left:0,right:0
  2、相互支持性
  容器无需固定width/height值，内部元素亦可以拉伸；容器拉伸，内部元素支持百分比width/height值；

demo

无固定width/height容器内的绝对定位元素拉伸


 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无固定width/height容器内的绝对定位元素拉伸</title>
 6 <style>
 7 body {
 8     background-color: #ddd;
 9 }
10 img {
11     vertical-align: bottom;
12 }
13 .container { 
14     display: inline-block;
15     position: relative;
16 }
17 .cover { 
18     position: absolute; 
19     left: 0; top: 0; right: 0; bottom: 0;
20     background-color: #fff;
21     opacity: .5; filter: alpha(opacity=50);
22 }
23 </style>
24 </head>
25 
26 <body>
27 <span class="container">
28     <i class="cover"></i>
29     <img src="http://img.mukewang.com/547c34cf000171a002560191.jpg" width="512" height="381">
30 </span>
31 <span class="container">
32     <i class="cover"></i>
33     <img src="http://img.mukewang.com/547c34c9000171a002560191.jpg" width="256" height="191">
34 </span>
35 </body>
36 </html>

View Code
没有宽度和高度声明实现的全屏自适应效果

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>没有宽度和高度声明实现的全屏自适应效果</title>
 6 <style>
 7 html, body { height: 100%; }
 8 .overlay {
 9     position: absolute;
10     left: 0; top: 0; right: 0; bottom: 0;
11     background-color: #000;
12     opacity: .5; filter: alpha(opacity=50);
13 }
14 </style>
15 </head>
16 
17 <body>
18 <div class="overlay"></div>
19 </body>
20 </html>

View Code
高度自适应的九宫格效果

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>高度自适应的九宫格效果</title>
 6 <style>
 7 html, body { height: 100%; margin: 0; }
 8 .page {
 9     position: absolute;
10     left: 0; top: 0; right: 0; bottom: 0;
11 }
12 .list {
13     float: left;
14     height: 33.3%; width: 33.3%;
15     position: relative;
16 }
17 .list:before {
18     content: '';
19     position: absolute;
20     left: 10px; right: 10px; top: 10px; bottom: 10px;
21     border-radius: 10px;
22     background-color: #cad5eb;
23 }
24 .list:after {
25     content:attr(data-index);
26     position: absolute;
27     height: 30px;
28     left: 0; right: 0; top: 0; bottom: 0;
29     margin: auto;
30     text-align: center;
31     font: 24px/30px bold 'microsoft yahei';
32 }
33 </style>
34 </head>
35 
36 <body>
37 <div class="page">
38     <div class="list" data-index="1"></div>
39     <div class="list" data-index="2"></div>
40     <div class="list" data-index="3"></div>
41     <div class="list" data-index="4"></div>
42     <div class="list" data-index="5"></div>
43     <div class="list" data-index="6"></div>
44     <div class="list" data-index="7"></div>
45     <div class="list" data-index="8"></div>
46     <div class="list" data-index="9"></div>
47 </div>
48 </body>
49 </html>

View Code
left/right拉伸和width同时存在,实现元素水平居中

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>left/right拉伸和width同时存在</title>
 6 <style>
 7 .image {
 8     position: absolute; left: 0; right: 0; width: 50%; 
 9 }
10 .button {
11     padding-top: 200px;
12 }
13 .button input {
14     width: 280px; height: 40px;
15     font-size: 20px;
16 }
17 </style>
18 </head>
19 
20 <body>
21 <img class="image" src="http://img.mukewang.com/547c34c9000171a002560191.jpg" height="191">
22 <p class="button">
23     <input type="button" value="添加margin: auto;" onClick="document.getElementsByTagName('img')[0].style.margin = 'auto';">
24 </p>
25 </body>
26 </html>

View Code
七、absolute与整体布局
1、html，body{height:100%}
    div{position:absolute;left:0;top:0;right:0;bottom:0}实现全屏布局
2、头、尾、侧边栏各居其位
header,footer{position:absolute;left:0;right:0}
header{height:48px;top:0}
footer{height:52px;bottom:0}
aside{width:250px;position:absolute;left:0;top:0;bottom:0}
.content{position:absolute;top:48px;bottom:52px;left:250px;overflow:auto}
效果：

这个时候，头部和尾部都是fix效果，滚动content的时候，只有content区域滚动。避免了移动端position:fixed实现的诸多问题
3.加载效果


参考地址：http://www.imooc.com/learn/192
 
    

  内容来源于网络如有侵权请私信删除
  

  
               
        
 
  标签：
                        HTML
                                CSS
                                HTML5
                                CSS3
              
        
         	
      
    
      
    
                


    
  
  
  
  


  

                
        	
    你还没有登录，请先登录或注册！
  

        
      还没有人评论，欢迎说说您的想法！
  


  
        
        

  
    相关课程
  
  
    
      
                                              
            
  
    
    
               	
                     
          
        
           
       
      
       
    
  
  
    
      
        云知梦-HTML5网页标签
      
    
    
    	 
      4619
                 
      



  	0元 
  	      	  	     
                  限免
              
 	 	    
  
          
                                                
            
  
    
    
                    
          
        
           
       
      
       
    
  
  
    
      
        Web前端页面制作快速入门
      
    
    
    	 
      5495
                 
      



  	9.8元 
  	      	 	    
  
          
                                                
            
  
    
    
               	
                     
          
        
           
       
      
       
    
  
  
    
      
        HTML5网页标签
      
    
    
    	 
      3959
                 
      



  	0元 
  	      	  	     
                  限免