# CSS 絕對定位釋義

以前看過屢次CSS絕對定位，可是缺少一個好的案例。偶爾看到一個控件，以爲用它來講明是很是簡明的。

假設咱們有一個DIV，內部還嵌入兩個平級的DIV，代碼以下：

<div class="wrapper">
	<div class="block1"></div>
	<div class="block2"></div>
</div>
<style>
	.wrapper{border: solid 1px;height:20px;width:220px;}
	.block1{background: red;height:10px;}
	.block2{background:blue;height:10px;width:100%;}
</style>
複製代碼

那麼按照默認的盒子模型，兩個平級的DIV一上一下，佔滿整個父親DIV。若是想要讓第二個DIV覆蓋第一個怎麼辦？

此時就必須取消默認排版過程，轉而使用絕對定位。方法就是設置.block2直接相對.wrapper定位，top距離爲0便可。具體作法就是在.wrapper內加入代碼：

position:relative
複製代碼

添加CSS代碼到.block2內：

position:absolute;top:0;
複製代碼

就能夠看到.block2覆蓋於.block1之上。這樣就達到了咱們但願的效果了。

使用徹底相同的結構，咱們能夠製做一個進度條控件：

<style>
.progress { position: relative; border: solid 1px;width: 100px;height:1rem;}
.progress > .bar { background: red; height: 100%; width:10%}
.progress > .label {position: absolute; top: 0; left: 0; width: 100%;
    text-align: center; font-size: 0.8rem; }
</style>
<div class="progress">
    <div class="bar"></div>
    <div class="label">10%</div>
</div>
複製代碼

這裏的.label正是經過對其父容器.progress的絕對定位，實現了.bar和.label的重合，從而實現的進度條效果。