有关绝对定位的理解 <br /> /* 1.未被设置定位之前是大盒子包裹着小盒子，符合标准文档流，如图片1所示<br /> .box1{<br /> width: 500px;<br /> height: 500px;<br /> background:red;<br /> }<br /> .box2{<br /> width: 200px;<br /> height: 200px;<br /> background:blue;<br /> }*/ <p>图片1 <p><img src="http://images2015.cnblogs.com/blog/966054/201607/966054-20160719142646685-675746292.png" alt="" style="max-width:90%" style="max-width:90%" /> <p><br /> /*2.绝对定位使元素的位置与文档流无关，因此不占据空间。<br /> 这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，<br /> 因为元素的位置相对于它在普通流中的位置。绝对定位的元素的位置相对于最近的已定位祖先元素，<br /> 如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。如图2所示<br /> .box1{<br /> width: 500px;<br /> height: 500px;<br /> background:red;<br /> position: relative;<br /> }<br /> .box2{<br /> width: 200px;<br /> height: 200px;<br /> background:blue;<br /> position:absolute;<br /> top:150px;<br /> left:150px; <p>}*/ <p>图片2 <p><img src="http://images2015.cnblogs.com/blog/966054/201607/966054-20160719142728951-1955957836.png" alt="" style="max-width:90%" style="max-width:90%" /><br /><br /> /*3、box2没有宽高并且在不设置定位的情况下,box2会被box1包裹,符合标准文档流，并且在占据文档的位置,<br /> 宽继承父元素的宽,高由内容自动撑开.如图片3.<br /> .box1{<br /> width: 500px;<br /> height: 500px;<br /> background:red;<br /> }<br /> .box2{<br /> background:blue;<br /> }*/ <p>图片3 <p><img src="http://images2015.cnblogs.com/blog/966054/201607/966054-20160719143010232-93629660.png" alt="" style="max-width:90%" style="max-width:90%" /> <p><br /> /*4、box2没有宽高在设置定位的情况下,box2会脱离文档流,并且位置在指定相对于相对定位元素的位置,<br /> 宽会失效,就是说宽高都由内容自动撑开的.如图片4.如需要宽高需另设置*/<br /> .box1{<br /> width: 500px;<br /> height: 500px;<br /> background:red;<br /> position: relative;<br /> }<br /> .box2{<br /> background:blue;<br /> position:absolute;<br /> top:150px;<br /> left:150px;<br /> } <p>图片4 <p><img src="http://images2015.cnblogs.com/blog/966054/201607/966054-20160719143044982-531229238.png" alt="" style="max-width:90%" style="max-width:90%" /> <p> 这是一个小盒子
