# CSS 絕對定位釋義

1000copy發表於2018-12-03
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的重合，從而實現的進度條效果。

相關文章