CSS深入理解之absolute

程序员文章站 2022-04-24 20:46:33

...

慕课学习-->前端开发-->HTML/CSS-->CSS深入理解之absolute

absolute

一、absolute与float

鲜为人知的兄弟关系，相同的特性表现：

包裹性

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>absolute的包裹性</title>
<style>
.box {
    padding: 10px;
    background-color: #f0f0f0;	
}
input {
    position: absolute; top: 234px;	
	width: 160px; height: 32px;
	font-size: 100%;
}
</style>
</head>

<body>
<div id="box" class="box"><img src="1.png"></div>
<input id="button" type="button" value="容器absolute化">
<script>
var eleBox = document.getElementById("box"), eleBtn = document.getElementById("button");
if (eleBox != null && eleBtn != null) {
	eleBtn.onclick = function() {
		if (this.absolute) {
			eleBox.style.position = "";
			this.value = "容器absolute化";
			this.absolute = false;
		} else {
			eleBox.style.position = "absolute";
			this.value = "容器去absolute";
			this.absolute = true;
		}
	};
}
</script>
</body>
</html>

破坏性

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>absolute的破坏性</title>
<style>
.box {
    padding: 10px;
    background-color: #f0f0f0;	
}
input {
    position: absolute; top: 200px;	
	width: 160px; height: 32px;
	font-size: 100%;
}
</style>
</head>

<body>
<div class="box"><img id="image" src="1.png"></div>
<input id="button" type="button" value="图片absolute化">
<script>
var eleImg = document.getElementById("image"), eleBtn = document.getElementById("button");
if (eleImg != null && eleBtn != null) {
	eleBtn.onclick = function() {
		if (this.absolute) {
			eleImg.style.position = "";
			this.value = "图片absolute化";
			this.absolute = false;
		} else {
			eleImg.style.position = "absolute";
			this.value = "图片去absolute";
			this.absolute = true;
		}
	};
}
</script>
</body>
</html>

页面布局absolute与float可相互替换

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>absolute和float高尔基</title>
<style>
body {
    background-color: #B0DEF5;
	font-size: 14px; font-family: arial;
	color: #444;
}
a {
	color: #0078b6;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
em {
	font-style: normal;
	color: #aeaeae;
	margin: 0 5px;
}
svg {
	position: absolute;
}
.container {
	width: 560px; height: -webkit-calc(100vh - 16px); height: calc(100vh - 16px);
	margin-left: auto; margin-right: auto;
	background-color: #fff;
}
.list {
	padding: 20px;
	position: relative;
}
.space {
	padding-left: 60px;
	line-height: 22px;
}
.space img {
	vertical-align: text-bottom;
}
.info {
	font-size: 12px;
	overflow: hidden;
	color: #808080;
}
.from {
	float: left;
}
.from a {
	color: #9abbc8;
}
p {
	margin: 6px 0;
}
.operate {
	float: right;
}
.operate img {
	vertical-align: text-bottom;
	margin-right: 3px;
}
.test {
	position: relative;
	font-size: 18px; font-family: 'microsoft yahei';
}
.test p {
   width: 200px;
   margin-left: auto; margin-right: auto;
   padding: 5px;
   background-color: #f0f0f0;	
}
.test input {
	width: 20px; height: 20px;
	vertical-align: -4px;
}
</style>
</head>

<body>
<div class="container">
	<svg xmlns="http://www.w3.org/2000/svg" width="520" height="360">
		<path d="M45 80C45 280,45 320,165 300" stroke-width="1" stroke="#444" fill="none"></path>
	</svg>
	<div class="list">
    	<a href="#" id="avatar" class="avatar" style="float: left;"><img src="http://img.mukewang.com/54447ac70001f5cc00500050.jpg"></a>
        <div class="space">
            <a href="//weibo.com/mukewang" target="_blank" title="慕课网">慕课网</a>
            <img src="http://img.mukewang.com/54447b1a0001750000160013.png">
            <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">
            <p><img src="http://img.mukewang.com/54447aea0001f43301200084.jpg"></p>
            <div class="info">    
               	<span class="from">
                	<a href="#">9月13日 10:27</a> 
                    <em>来自</em><a href="#">微博 weibo.com</a>                      
                </span>
                <span class="operate">
                	<a href="javascript:" title="赞"><img src="http://img.mukewang.com/54447c350001055b00120013.png">(4)</a><em>|</em>
                    <a href="javascript:">转发(5)</a><em>|</em>
                    <a href="javascript:">收藏</a><em>|</em>
                    <a href="javascript:">评论(2)</a>
                </span>
            </div>
        </div>
    </div>
    <div class="test">
    	<p><input type="radio" name="layout" id="float" checked><label for="float">float: left;</label></p>
        <p><input type="radio" name="layout" id="absolute"><label for="absolute">position: absolute;</label></p>
    </div>
</div>
<script>
var eleAvatar = document.getElementById("avatar"),
    eleFloat = document.getElementById("float"),
	eleAbsolute = document.getElementById("absolute");

// SVG路径以及相关动画
var elePath = document.querySelector("path"), timerPath = null;	
var funPathMove = function(end) {
	clearTimeout(timerPath);
	var d = elePath.getAttribute("d"), arrD = d.split(" ");
	// 动画起始值
	var start = arrD.slice(-1) * 1;
	if (start == end) return;
	// 速率
	var rate = 5, current = start;
	console.log(arrD);
	var step = function() {
		if (Math.abs(end - current) < 1) {
			current = end;
		} else {
			current += (end - current) / 5;
			timerPath = setTimeout(step, 30);
		}
		// 替换最后一个值
		arrD.splice(-1, 1, current);
		// 曲线走起
		elePath.setAttribute("d", arrD.join(" "));
	};
	step();
};

if (eleAvatar && eleFloat && eleAbsolute) {
	var attrFloat = eleAvatar.style.cssFloat != undefined? "cssFloat": "styleFloat";
	eleFloat.onclick = function() {
		eleAvatar.style.position = "";
		eleAvatar.style[attrFloat] = "left";
		elePath && funPathMove(300);
	};
	eleAbsolute.onclick = function() {
		eleAvatar.style[attrFloat] = "";
		eleAvatar.style.position = "absolute";
		elePath && funPathMove(340);
	};
}
</script>
</body>
</html>

二、absolute和relative

Relative和absolute是分离的，对立的。Relative是为了限制absolute的。事实上，absolute越独立越强大。

独立的absolute可以摆脱overflow的限制，无论是滚动还是隐藏。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>超越overflow</title>
<style>
body {
    background-color: #bbb;
}
.scroll {
    width: 500px; height: 300px;
	margin: 200px auto 0;
	margin-top: -webkit-calc(50vh - 150px);
	margin-top: calc(50vh - 150px);
	border: 1px solid #ccc;
	border-radius: 3px;
	box-shadow: 0 0 3px rgba(0,0,0,.35);
	background-color: #fff;
	overflow: auto;
}
.close {
    position: absolute;
	width: 34px; height: 34px;	
	margin: -17px 0 0 483px;
	background: url(http://img.mukewang.com/5444835b000100ce00340075.png) no-repeat;
}
.close:hover {
    background-position: 0 -41px;	
}
img {
	display: block;
	margin: 10px;
}
</style>
</head>

<body>
<div class="scroll">
	<a href="javascript:" class="close" title="关闭"></a>
	<img src="http://img.mukewang.com/54447b06000171a002560191.jpg">
    <img src="http://img.mukewang.com/54447f550001ccb002560191.jpg">
</div>
</body>
</html>

三、无依赖的absolute定位

1、无依赖的意思是：不受relative限制的absolute定位，行为表现上是不使用top/right/bottom/left任何一个属性或使用auto作为值！

2、定位的行为表现：脱离文档流；折翼的天使（去浮动，位置跟随）

举例折翼的天使

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>折翼的天使</title>
	<style>
	input[type=button] {
		height: 32px;
		font-size: 100%;    
	}
	</style>
</head>

<body>
	<img src="http://img.mukewang.com/54447b06000171a002560191.jpg">
	<img src="http://img.mukewang.com/54447f4a0001eb7d01910256.jpg">
	<img src="http://img.mukewang.com/54447f550001ccb002560191.jpg">
	<p><input type="button" id="button" value="点击第2张图片应用position:absolute变天使"></p>
	<script>
	var button = document.getElementById("button"),
		image2 = document.getElementsByTagName("img")[1];
	if (button && image2) {
		var value_init = button.value;
		button.onclick = function() {
			if (this.value == value_init) {
				image2.style.position = "absolute";
				this.value = "撤销";
			} else {
				image2.style.position = "";
				this.value = value_init;
			}
		};
	}
	</script>
</body>
</html>

将图片2绝对定位，图片2悬浮在图片1和3的上层，但图片二的位置还是绝对定位前的位置。

3、Absolute与去浮动

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>折翼天使表现特性一：去浮动</title>
	<style>
	input[type=button] {
		height: 32px;
		font-size: 100%;    
	}
	</style>
</head>

<body>
	<img src="http://img.mukewang.com/54447b06000171a002560191.jpg">
	<img src="http://img.mukewang.com/54447f4a0001eb7d01910256.jpg">
	<img src="http://img.mukewang.com/54447f550001ccb002560191.jpg">
	<p><input type="button" id="float" value="点击第2张图片应用float:left"></p>
	<p><input type="button" id="button" value="点击第2张图片应用position:absolute"></p>
	<script>
	var flbtn = document.getElementById("float"),
		button = document.getElementById("button"),
		image2 = document.getElementsByTagName("img")[1];
	if (flbtn && button && image2) {
		var value_init = button.value;
		button.onclick = function() {
			if (this.value == value_init) {
				image2.style.position = "absolute";
				this.value = "撤销";
			} else {
				image2.style.position = "";
				this.value = value_init;
			}
		};
		
		flbtn.onclick = function() {
			image2.style["cssFloat" in this.style? "cssFloat": "styleFloat"] = "left";
		};
	}
	</script>
</body>
</html>

绝对定位和浮动是不能同时生效的。也就是说绝对定位生效的时候，浮动绝对是无效的。

4、absolute与位置跟随

如果元素是block换行显示的，绝对定位之后仍然换行显示；如果元素是inline/inline-block跟在文字后面，绝对定位后还是跟在文字后面；这就叫位置跟随。也就是说原来什么位置，绝对定位之后位置不变。

Chrome浏览器下，一个元素绝对定位之后，改变display（block/inline-block），效果不变。火狐浏览器和Chrome下的位置跟随是没有任何问题的。

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>折翼天使表现特性二：位置跟随</title>
		<style>
			input[type=button] {
				height: 32px;
				font-size: 100%;
			}
			p { margin-left: 260px; }
			img + p { margin-top: 60px; }
		</style>
	</head>

	<body>
		<img src="http://img.mukewang.com/54447b06000171a002560191.jpg">
		<img src="http://img.mukewang.com/54447f4a0001eb7d01910256.jpg">
		<img src="http://img.mukewang.com/54447f550001ccb002560191.jpg">
		<p><input type="button" id="block" value="点击第2张图片应用display:block"></p>
		<p><input type="button" id="button" value="点击第2张图片应用position:absolute变天使"></p>
	<script>
	var block = document.getElementById("block"),
		button = document.getElementById("button"),
		image2 = document.getElementsByTagName("img")[1];
	if (block && button && image2) {
		var value_init_button = button.value;
		button.onclick = function() {
			if (this.value == value_init_button) {
				image2.style.position = "absolute";
				this.value = "撤销";
			} else {
				image2.style.position = "";
				this.value = value_init_button;
			}
		};
		
		var value_init_block = block.value;
		block.onclick = function() {
			if (this.value == value_init_block) {
				image2.style.display = "block";
				this.value = "撤销";
			} else {
				image2.style.display = "";
				this.value = value_init_block;
			}	
		};
	}
	</script>
	</body>
</html>

唯一有问题的是IE7，永远的inline-block化（在IE7下，任何元素绝对定位后都会inline-block化，即使之前是block水平），所以可以实现跟随文字显示效果，无法实现换行显示。解决办法：在绝对定位的元素外套一层没有任何设置的div

5、配合margin的精准定位：支持负值定位；兼容性超强（兼容IE6）

6、我把这种不依赖的absolute定位称之为：不影响其他布局的绝对定位下的相对定位之王！（使用绝对定位元素，实现的是相对定位）

四、无依赖absolute相对定位实例篇

1、图片图标绝对定位

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图标定位二三事</title>
<style>
body { font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; }
body, h3, h5 { margin: 0; }
img { border: 0 none; vertical-align: bottom; }
.l { float: left; }.r { float: right; }
.constr { width: 1200px; margin-left: auto; margin-right: auto; }
.header { background-color: #2A2C2E; }
.nav { height: 60px; }
.nav-list { float: left; font-size: 14px; font-weight: 400; }
.nav-a { display: inline-block; line-height: 20px; padding: 20px 35px; color: #B5BDC0; text-decoration: none; }
.nav-a:hover { color: #fff; }

.course { padding-top: 10px; }
.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; }
.course-list-img { background-color: #6396F1; }
.course-list-h { line-height: 50px; font-size: 14px; font-weight: 400; color: #363d40; text-align: center; }
.course-list-tips { margin: 0 14px; font-size: 12px; color: #b4bbbf; overflow: hidden; }

.icon-hot { position: absolute; width: 28px; height: 11px; margin: -6px 0 0 2px; background: url(http://img.mukewang.com/545304730001307300280011.gif); }
.icon-recom { position: absolute; line-height: 20px; padding: 0 5px; background-color: #f60; color: #fff; font-size: 12px; }
.icon-vip { position: absolute; width: 36px; height: 36px; margin-left: -36px; background: url(http://img.mukewang.com/5453048000015d8800360036.gif); text-indent: -9em; overflow: hidden; }
</style>
</head>

<body>
<div class="header">
    <div class="constr">
        <div class="nav">
            <h3 class="nav-list">
            	<a href="http://www.imooc.com/course/list" class="nav-a">课程</a>
            </h3>
            <h3 class="nav-list">
            	<a href="http://www.imooc.com/wenda" class="nav-a">问答</a>
            </h3>
            <h3 class="nav-list">
            	<a href="http://www.imooc.com/seek/index" class="nav-a">
                	求课<i class="icon-hot"></i>
                </a>
            </h3>
        </div>
    </div>
</div>

<div class="main">
	<div class="constr">
    	<div class="course">
            <a href="http://www.imooc.com/view/121" class="course-list">
                <div class="course-list-img">
                	<span class="icon-recom">推荐</span>
                    <img width="280" height="160" alt="分享：CSS深入理解之float浮动" src="http://img.mukewang.com/53d74f960001ae9d06000338-300-170.jpg"><!--
                    --><i class="icon-vip">vip</i>
                </div>
                <h5 class="course-list-h">分享：CSS深入理解之float浮动</h5>
                <div class="course-list-tips">
                    <span class="l">已完结</span>
                    <span class="r">3514人学习</span>
                </div>
            </a>
        </div>
    </div>
</div>
</body>
</html>

图片图标使用绝对定位覆盖在其他元素上，不依赖position:relative实现定位。

CSS深入理解之absolute

求课HOT，左上角推荐，右上角VIP都是由图片图标绝对定位来实现的。大多数是，父元素position:relative，子元素position:absolute+left/top来实现的，这种实现虽然效果好且兼容性强，但父元素和子元素都要设置定位属性，而且自适应性不强。

我们用不依赖的绝对定位来实现。父元素不需要定位，HOT图标position:absolute+margin来实现定位精确位置。这样实现自适应性强。左上角推荐是利用位置跟随的特性来实现。

右上角VIP无依赖的绝对定位元素具有跟随性，绝对定位前后位置不变，且宽高不占有任何尺寸。

2、下拉框定位

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>下拉框定位二三事</title>
<style>
body { margin: 0; font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; }
.constr { width: 1200px; max-width: 80%; margin-left: auto; margin-right: auto; padding-bottom: 300px; overflow: hidden; }
.course-sidebar { width: 262px; float: left; }
.course-sidebar > div { border: 1px solid #e6e8e9; box-shadow: 0px 1px 2px #d5d7d8; background-color: #fff; }
.course-sidebar-type { height: 380px; }
.course-sidebar-search { margin-top: 20px; overflow: hidden; }
.course-search-input { width: 200px; line-height: 18px; padding: 10px; margin: 0; border: 0 none; font-size: 12px; font-family: inherit; float: left; }
.course-sidebar-search.focus { border-color: #2ea7e0; }
.course-search-input:focus { outline: 0 none; }
.course-search-input::-ms-clear { display: none; }
.course-search-btn { width: 38px; height: 38px; float: right; background: url(http://img.mukewang.com/545305ba0001f3f600380076.png); text-indent: -9em; overflow: hidden; }
.focus .course-search-btn { background-position: 0 -38px; }

.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; }
.course-sidebar-result > li { line-height: 30px; padding-left: 12px; }
.course-sidebar-result > li:hover { background-color: #f9f9f9; }
.course-sidebar-result a { display: block; color: #5e5e5e; text-decoration: none; }
.course-sidebar-result a:hover { color: #000; }
</style>
</head>

<body>
<div class="constr">
    <div class="course-sidebar">
    	<div class="course-sidebar-type"></div>
        <div class="course-sidebar-search">
        	<ul id="result" class="course-sidebar-result">
            	<li><a href="http://www.imooc.com/view/121">分享：CSS深入理解之float浮动</a></li>
                <li><a href="http://www.imooc.com/view/118">案例：CSS圆角进化论</a></li>
                <li><a href="http://www.imooc.com/view/93">案例：CSS Sprite雪碧图应用</a></li>
                <li><a href="http://www.imooc.com/view/77">案例：CSS3 3D 特效</a></li>
                <li><a href="http://www.imooc.com/view/57">案例：如何用CSS进行网页布局</a></li>
            </ul>
        	<input class="course-search-input" placeholder="课程搜索">
            <a href="javascript:" class="course-search-btn">搜索</a>
        </div>
    </div>
</div>
<script>
(function() {
	var input = document.getElementsByTagName("input")[0],
	    result = document.getElementById("result");
		
	if (input && result) {
		input.onfocus = function() {
			this.parentNode.className = "course-sidebar-search focus";
			if (this.value != "") {
				// show datalist
				result.style.display = "block";
			}
		};
		input.onblur = function() {
			if (this.value == "") {
				this.parentNode.className = "course-sidebar-search";
			}
			// hide datalist
			result.style.display = "none";
		};
		
		// IE7 that wrap a DIV for avoid bad effect from float
		if (!document.querySelector) {
			var div = document.createElement("div");
			input.parentNode.insertBefore(div, input);
			div.appendChild(result);
		}
		// events of datalist
		if ("oninput" in input) {
			input.addEventListener("input", function() {
				if (this.value.trim() != "") {
					result.style.display = "block";
				} else {
					result.style.display = "none";
				}
			});
		} else {
		    // IE6-IE8
			input.onpropertychange = function(event) {
				event = event || window.event;
				if (event.propertyName == "value" && /focus/.test(this.parentNode.className)) {
					if (this.value != "") {
						result.style.display = "block";
					} else {
						result.style.display = "none";
					}
				}
			}
		}
	}

})();
</script>
</body>
</html>

利用无依赖的绝对定位来实现。自适应性强

3、居中以及边缘对其定位

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>居中、边缘定位二三事</title>
<style>
body { margin: 0; font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; }
.constr { width: 1200px; max-width: 80%; margin-left: auto; margin-right: auto; }
.course-content { float: right; position: relative; width: 920px; min-height: 1200px; background: #fff; }
.course-list-x { padding: 20px 10px; overflow: hidden; }
.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; }

.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; }
.goto_top_diaocha { background-position: -48px 0; }
.goto_top_diaocha:hover { background-position: -48px -50px; }
.goto_top_app { background-position: -96px 0; }
.goto_top_app:hover { background-position: -96px -50px; }
.goto_top_feed { background-position: -144px 0; }
.goto_top_feed:hover { background-position: -144px -50px; }

.course-loading-x { height: 0; margin-top: 20px; text-align: center; letter-spacing: -.25em; overflow: hidden; }
.course-loading { position: absolute; margin-left: -26px; }

.course-fixed-x { height: 0; text-align: right; overflow: hidden; }
.course-fixed { display: inline; position: fixed; margin-left: 20px; bottom: 100px; }
</style>
</head>

<body>
<div class="constr">
    <div class="course-content">
        <div class="course-list-x">
        	<div class="course-list"></div>
            <div class="course-list"></div>
            <div class="course-list"></div>
            <div class="course-list"></div>
            <div class="course-list"></div>
            <div class="course-list"></div>
        </div>
        <div class="course-loading-x">
        	 <img src="http://img.mukewang.com/5453077400015bba00010001.gif" class="course-loading" alt="加载中...">
        </div>
        <div class="course-fixed-x">
        	 <div class="course-fixed">
                <a href="http://www.imooc.com/activity/diaocha" class="goto_top_diaocha"></a>
                <a href="http://www.imooc.com/mobile/app" class="goto_top_app"></a>
                <a href="http://www.imooc.com/user/feedback" class="goto_top_feed"></a>
            </div>
        </div>
    </div>
</div>
</body>
</html>

使用text-align属性控制无依赖绝对定位元素的居中或边缘定位效果。

CSS深入理解之absolute

图片居中显示的实现：

</div>

设置父元素text-align:center;，控制居中。text-align属性并不能对绝对定位元素造成影响。将图片绝对定位，利用位置跟随显示在后边，再将图片margin-left:-26px;（图片52*52px），即可实现图片居中显示。

右下角图片显示，与图片居中显示类似，父元素text-align:right;。子元素无依赖绝对定位+margin控制位置。

4、对齐溢出技巧实例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文本图标对齐与定位二三事</title>
<style>
body { margin: 0; font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; }
a { color: #50B6E5; }
.constr { width: 1200px; margin-left: auto; margin-right: auto; }
.regist-head { height: 60px; line-height: 60px; padding-left: 30px; background-color: #be3948; color: #fff; font-size: 18px; }
.regist-body { min-height: 400px; padding: 100px 0; background-color: #fff; }
.regist-main { width: 600px; margin-left: auto; margin-right: auto; }
.regist-group { margin-top: 20px; overflow: hidden; }
.regist-label { width: 70px; padding-top: 10px; float: left; }
.regist-cell { display: table-cell; *display: inline-block; }
.regist-input { height: 18px; line-height: 18px; width: 260px; padding: 10px 5px; margin: 0 10px 0 0; border: 1px solid #d0d6d9; vertical-align: top; }
.regist-code-input { width: 130px; }
.regist-btn { display: inline-block; width: 160px; line-height: 40px; background-color: #39b94e; color: #fff; text-align: center; text-decoration: none; }
.regist-btn:hover { background-color: #33a646; }
.icon-warn { display: inline-block; width: 20px; height: 21px; background: url(http://img.mukewang.com/5453084a00016ae300120012.gif) no-repeat center; }

.regist-star { position: absolute; margin-left: -1em; font-family: simsun; color: #f30; }
.regist-remark { position: absolute; line-height: 21px; padding-top: 9px; color: #666; }
.regist-warn { padding-left: 20px; color: #be3948; }
.regist-warn > .icon-warn { position: absolute; margin-left: -20px; }
</style>
</head>

<body>
<div class="constr">
    <div class="regist-head">注册</div>
    <div class="regist-body">
    	<div class="regist-main">
        	<div class="regist-group">
            	<label class="regist-label"><span class="regist-star">*</span>登录邮箱</label>
                <div class="regist-cell">
                	<input type="email" class="regist-input"><span class="regist-remark regist-warn">
                    	<i class="icon-warn"></i>邮箱格式不准确（演示）
                    </span>
                </div>
            </div>
            <div class="regist-group">
            	<label class="regist-label"><span class="regist-star">*</span>登录密码</label>
                <div class="regist-cell">
                	<input type="password" class="regist-input"><span class="regist-remark">
                    	请输入6-16位密码，区分大小写，不能使用空格
                    </span>
                </div>
            </div>
            <div class="regist-group">
            	<label class="regist-label"><span class="regist-star">*</span>用户昵称</label>
                <div class="regist-cell">
                	<input type="password" class="regist-input">
                </div>
            </div>
            <div class="regist-group">
            	<label class="regist-label">手机号码</label>
                <div class="regist-cell">
                	<input type="tel" class="regist-input">
                </div>
            </div>
            <div class="regist-group">
            	<label class="regist-label"><span class="regist-star">*</span>验 证 码</label>
                <div class="regist-cell">
                	<input class="regist-input regist-code-input"><img src="http://img.mukewang.com/545308540001678401500040.jpg">
                </div>
            </div>
            <div class="regist-group">
            	<label class="regist-label"> </label>
                <div class="regist-cell">
                	<input type="checkbox" checked><label>我已阅读并同意<a href="##">慕课协议</a>。</label>
                    <p>
                    	<a href="javascript:" class="regist-btn">立即注册</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

左边星号后的文字左侧对齐，将星号绝对定位，绝对定位的元素不会占据任何空间，那么文字就会左对齐了。

邮箱格式的提示，容易出现图标与文字垂直方向不对齐的现象，将图标absolute绝对定位即可。

密码提示溢出，显示位置超出容器。将文字绝对定位即可（因为绝对定位的元素不占据任何空间）。

五、Absolute和层级

1、脱离文档流

（1）动画尽量作用在绝对定位元素上！因为绝对定位元素如何改变都不能影响普通元素的布局

（2）z-index潜在误区：绝对定位元素都需要z-index控制层级，确定其显示的垂直位置！

2、z-index无依赖

（1）如果只有一个绝对定位元素，自然不需要z-index，自动覆盖普通元素；

（2）如果两个绝对定位，控制DOM流的前后顺序达到需要的覆盖效果，依然无z-index；

（3）如果多个绝对定位交错，非常非常少见，z-index:1控制；

（4）如果非弹框类的绝对定位元素z-index>2，必定z-index冗余，请优化！

六、absolute和left/top/right/bottom

1、left/top/right/bottom与width/height

（1）相互替代性

实现一个全屏自适应的50%黑色半透明遮罩层

方法一：

<style type="text/css">
body{height:100%;}
.box{position:absolute;width:100%;height:100%;left:0;top:0;background: rgba(0,0,0,0.5);}
</style>
<body>
<div class="box"></div>
</body>

方法二：没有宽度（width）没有高度（height）实现宽高满屏效果。

<style type="text/css">
body{height:100%;}
.box{position:absolute;left:0;top:0;right:0;bottom:0;background: rgba(0,0,0,0.5);}
</style>
<body>
<div class="box"></div>
</body>

如果绝对定位方向是对里的（如：left vs right，top vs bottom）的时候，结果不是瞬间位移，而是身体的爆裂拉伸。

通常情况下，absolute的拉伸和width/height是可以相互替代的。（注意：爆裂拉伸特性IE7+支持！）

position:absolute;left:0; top:0;width:50%;

等同于：

position:absolute;left:0;top:0;right:50%;

差异所在 - 拉伸更强大。实现一个距离右侧200像素的全屏自适应的容器层。使用拉伸实现：

position:absolute;left:0;top:0;right:200px;

使用width只能使用CSS3 cala计算（现代浏览器才支持）：

position:absolute;left:0;top:0;width:calc(100%-200px);

（2）相互支持性

A、容器无需固定width/height值，内部元素亦可拉伸

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无固定width/height容器内的绝对定位元素拉伸</title>
<style>
body {
    background-color: #ddd;
}
img {
	vertical-align: bottom;
}
.container { 
	display: inline-block;
	position: relative;
}
.cover { 
	position: absolute; 
	left: 0; top: 0; right: 0; bottom: 0;
	background-color: #fff;
	opacity: .5; filter: alpha(opacity=50);
}
</style>
</head>

<body>
<span class="container">
	<i class="cover"></i>
	<img src="http://img.mukewang.com/547c34cf000171a002560191.jpg" width="512" height="381">
</span>
<span class="container">
	<i class="cover"></i>
	<img src="http://img.mukewang.com/547c34c9000171a002560191.jpg" width="256" height="191">
</span>
</body>
</html>

B、容器拉伸，内部元素支持百分比width/height。

通常情况下，元素百分比height要想起作用，需要父级容器的height值不是auto；但在绝对定位拉伸下，即使父级容器的height值是auto，只要容器绝对定位拉伸形成，百分比高度值也是支持的。

举例：高度自适应的九宫格布局效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>高度自适应的九宫格效果</title>
<style>
html, body { height: 100%; margin: 0; }
.page {
    position: absolute;
	left: 0; top: 0; right: 0; bottom: 0;
}
.list {
	float: left;
	height: 33.3%; width: 33.3%;
	position: relative;
}
.list:before {
	content: '';
	position: absolute;
	left: 10px; right: 10px; top: 10px; bottom: 10px;
	border-radius: 10px;
	background-color: #cad5eb;
}
.list:after {
	content:attr(data-index);
	position: absolute;
	height: 30px;
	left: 0; right: 0; top: 0; bottom: 0;
	margin: auto;
	text-align: center;
	font: 24px/30px bold 'microsoft yahei';
}
</style>
</head>

<body>
<div class="page">
	<div class="list" data-index="1"></div>
    <div class="list" data-index="2"></div>
    <div class="list" data-index="3"></div>
    <div class="list" data-index="4"></div>
    <div class="list" data-index="5"></div>
    <div class="list" data-index="6"></div>
    <div class="list" data-index="7"></div>
    <div class="list" data-index="8"></div>
    <div class="list" data-index="9"></div>
</div>
</body>
</html>

（3）相互合作性

例如：position: absolute; left: 0; right: 0; width: 50%;的实际宽度是50%而不是100%。当遭遇margin:auto的时候，两者的合作性就体现出来了！

当尺寸限制、拉伸以及margin:auto同时出现的时候，就会有绝对定位元素的绝对居中效果！（注意：绝对居中特性IE8+支持！）

举例：left/right拉伸和width同时存在

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>left/right拉伸和width同时存在</title>
<style>
.image {
    position: absolute; left: 0; right: 0; width: 50%; 
}
.button {
	padding-top: 200px;
}
.button input {
	width: 280px; height: 40px;
	font-size: 20px;
}
</style>
</head>

<body>
<img class="image" src="http://img.mukewang.com/547c34c9000171a002560191.jpg" height="191">
<p class="button">
	<input type="button" value="添加margin: auto;" onClick="document.getElementsByTagName('img')[0].style.margin = 'auto';">
</p>
</body>
</html>

七、absolute和移动web布局

1、absolute网页整体布局（适合移动web的布局策略）

（1）摆脱狭隘的定位：与fixed，relative一样，absolute的设计初衷确实是定位（position），但与fixed，relative不同的是，absolute包含更多特有且强大的特性。使用absolute不仅仅可以实现一些覆盖与定位，还可以实现网页的整体布局。

使用absolute实现网页的整体布局，有点：兼容性好，自适应强，扩展方便，性能优异，可以方便实现诸多效果，适合移动端、PC端。

（2）策略

A、body降级，子元素升级

升级的子div（假设类名为page）满屏走起：

.page {position:absolute;left: 0;top:0; right: 0; bottom: 0;} 就可以实现满屏拉伸效果。

绝对定位受限于父级，因此，page要想愉快的拉伸，需要：html, body { height: 100%; }

B、各模块 - 头尾、侧边栏（PC端）各居其位

.header, .footer, { position: absolute; left: 0; right: 0; }

.header { height: 48px; top: 0; }

.footer { height: 52px; bottom: 0; }

Aside{ width:240px; position:absolute; left: 0; top: 0; bottom:0;}

C、内容区域content想象成body

.content { position:absolute; top: 48px; bottom: 52px; overflow: auto; left:240px;（如果有侧边栏）}

此时的头部尾部以及侧边栏都是fixed效果，不跟随滚动。避免了移动端position:fixed实现带来的诸多问题。

D、全屏覆盖与page平级

.overlay{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index:9;}

2、例子

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>慕课网-绝对定位整页布局演示</title>
<link rel="stylesheet" href="absolute.css">
<style>
body { font-family: 'microsoft yahei'; }
</style>
</head>

<body>
<div class="page">
    <div class="header">
        <h1>慕课网</h1>
        <a href="javascript:" class="icon-add">添加</a>
        <a href="javascript:" class="icon-search">搜索</a>
    </div>
    <div class="content">
    	<div class="">
        	<a href="http://www.imooc.com/learn/192" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5>张鑫旭</h5><time>早上09:51</time></div>
                    <p>CSS深入理解值绝对定位</p>
                </div>
            </a>
        	<a href="http://www.imooc.com/learn/192" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5>张鑫旭</h5><time>早上09:38</time></div>
                    <p>如果高度不够，可以手动缩小浏览器高度</p>
                </div>
            </a>
            <a href="http://www.imooc.com/learn/192" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5>张鑫旭</h5><time>早上08:47</time></div>
                    <p>此demo是本系列最后一个demo</p>
                </div>
            </a>
            <a href="http://www.imooc.com/learn/192" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5>张鑫旭</h5><time>早上08:36</time></div>
                    <p>此demo需要在高级浏览器中查看</p>
                </div>
            </a>
            <a href="http://www.imooc.com/learn/192" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5>张鑫旭</h5><time>昨天</time></div>
                    <p>重在原理展示，结构可多变。例如，header放在page外面~~</p>
                </div>
            </a> 
            <a href="https://github.com/zhangxinxu/mobilebone" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5>张鑫旭</h5><time>昨天</time></div>
                    <p>最近鄙人整了个名叫Mobilebone的开源项目</p>
                </div>
            </a>
            <a href="https://github.com/zhangxinxu/mobilebone" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5>张鑫旭</h5><time>星期三</time></div>
                    <p>就是依赖绝对定位整体布局，大家可以前去围观</p>
                </div>
            </a>
            <a href="http://www.imooc.com/learn/192" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5 class="business">慕课网</h5><time>星期三</time></div>
                    <p><img src="http://img.mukewang.com/547d33a00001299b00320033.jpg" width="16" height="16"></p>
                </div>
            </a>
            <a href="http://www.imooc.com/learn/121" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5>张鑫旭</h5><time>星期三</time></div>
                    <p>CSS深入理解之浮动</p>
                </div>
            </a>
            <a href="http://www.imooc.com/learn/121" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5>张鑫旭</h5><time>上周</time></div>
                    <p>同样精彩，欢迎支持~</p>
                </div>
            </a>
        </div>
    </div>
    
    <div class="footer">
        <a href="http://www.imooc.com/course/list">
            <i class="icon-wechat"></i>课程
        </a>
        <a href="http://www.imooc.com/wenda">
            <i class="icon-contacts"></i>问答
        </a>
        <a href="http://www.imooc.com/seek/index">
            <i class="icon-finds"></i>求课
        </a>
        <a href="http://www.imooc.com/space/course" class="active">
            <i class="icon-mes"></i>我的课程
        </a>
    </div>
</div>
</body>
</html>

absolute.css

/* wechat.css */
body {
    margin: 0;
	-webkit-user-select: none;
	user-select: none;
	-ms-touch-action: none;
}

/* construction */
html, body, .page {
	height: 100%; width: 100%;
	overflow: hidden;
}
.page {
	position: absolute; left: 0; top: 0;
}
body { background-color: #ebebeb; font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; }
a { text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,0); }
h1,h2,h3,h4,h5,h6{ margin: 0; font-weight: 400; }
ul,ol{ margin: 0; list-style-type: none; }

.header, .footer, .content { position: absolute; left: 0; right: 0; }
.header { height: 48px; padding: 0 5px; background-color: #21292B; color: #fff; top: 0; z-index: 1; }
.header > h1 { line-height: 48px; margin: 0 0 0 10px; font-size: 18px; float: left; }
.header > a { display: inline-block; width: 48px; height: 48px; background-size: 48px 144px; text-indent: -9em; overflow: hidden; }
.header > .icon-search, .header > .icon-add { float: right; }
.footer { height: 52px; border-top: 1px solid #dfdfdf; background-color: #fcfcfc; bottom: 0; z-index: 1; }
.footer > a { width: 25%; text-align: center; color: #999; float: left; font-size: 14px; }
.footer > a > i { display: block; height: 35px; margin-bottom: -3px; background-size: 35px 280px; }
.footer > .active { color: #45c018; }
.content { top: 48px; bottom: 53px; overflow: auto; }

.icon-search, .icon-back, .icon-add { background: url(http://img.mukewang.com/547d339b000188bb00960288.png) no-repeat; }
.icon-back { background-position: 0 -96px; }
.icon-add { background-position: 0 -48px; }
.icon-wechat, .icon-contacts, .icon-finds, .icon-mes { background: url(http://img.mukewang.com/547d33970001444d00700560.png) no-repeat center top; }
.active .icon-wechat { background-position: center -35px; }
.icon-contacts { background-position: center -70px; }
.active .icon-contacts { background-position: center -105px; }
.icon-finds  { background-position: center -140px; }
.active .icon-finds { background-position: center -175px; }
.icon-mes  { background-position: center -210px; }
.active .icon-mes { background-position: center -245px; }
.icon-find { background: url(icon-find.png) no-repeat; background-size: 28px 210px; }
.icon-find-2 { background-position: 0 -30px; }
.icon-find-3 { background-position: 0 -60px; }
.icon-find-4 { background-position: 0 -90px; }
.icon-find-5 { background-position: 0 -120px; }
.icon-find-6 { background-position: 0 -150px; }
.icon-find-7 { background-position: 0 -180px; }
.icon-me { background: url(icon-me.png) no-repeat; background-size: 28px 120px; }
.icon-me-2 { background-position: 0 -30px; }
.icon-me-3 { background-position: 0 -60px; }
.icon-me-4 { background-position: 0 -90px; }


.wechat-list { display: block; height: 64px; padding: 8px 12px; box-sizing: border-box; border-bottom: 1px solid #d7d7d7; background-color: #fff; }
.wechat-list:last-child { border-bottom: 0; }
.wechat-list > img { width: 48px; height: 48px; float: left; }
.wechat-list > .cell { padding-left: 58px; line-height: 24px; color: #333; }
.wechat-h-time { overflow: hidden; }
.wechat-h-time > h5 { font-size: 100%; float: left; }
.wechat-h-time > time { font-size: 12px; color: #b9b9b9; float: right; }
.wechat-h-time .business { color: #54688D; }
.wechat-h-time + p { margin: 0 20px 0 0; font-size: 14px; color: #a8a8a8; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.wechat-detail { position: relative; z-index: 1; }

CSS深入理解之absolute

absolute

一、absolute与float

二、absolute和relative

三、无依赖的absolute定位

四、无依赖absolute相对定位实例篇

五、Absolute和层级

六、absolute和left/top/right/bottom

七、absolute和移动web布局

深入理解CSS计数器_html/css_WEB-ITnose

!important、CSS样式、选择器优先级高低的深入理解

css3深入了解之奇技淫巧

CSS/块级元素与内联元素的深入理解_html/css_WEB-ITnose

《深入理解bootstrap》读书笔记：第4章 CSS组件（上）

深入理解JavaScript系列（29）：设计模式之装饰者模式详解_javascript技巧

CSS3中:nth-child和:nth-of-type的区别深入理解

分布式事务之深入理解什么是2PC、3PC及TCC协议？

深入理解PHP之require/include顺序推荐

深入理解IOS控件布局之Masonry布局框架

CSS深入理解之absolute

absolute

一、absolute与float

二、absolute和relative

三、无依赖的absolute定位

四、无依赖absolute相对定位实例篇

五、Absolute和层级

六、absolute和left/top/right/bottom

七、absolute和移动web布局

深入理解CSS计数器_html/css_WEB-ITnose

!important、CSS样式、选择器优先级高低的深入理解

css3深入了解之奇技淫巧

CSS/块级元素与内联元素的深入理解_html/css_WEB-ITnose

《深入理解bootstrap》读书笔记：第4章 CSS组件（上）

深入理解JavaScript系列（29）：设计模式之装饰者模式详解_javascript技巧

CSS3中:nth-child和:nth-of-type的区别深入理解

分布式事务之深入理解什么是2PC、3PC及TCC协议？

深入理解PHP之require/include顺序 推荐

深入理解IOS控件布局之Masonry布局框架

深入理解PHP之require/include顺序推荐