CSS 嵌套絕對定位

.test{position: relative;width: 300px; height: 300px; background: red;} 
.t2{position: absolute;width: 200px; height: 200px; background: black; top: 10px;left:10px;}
.t3{position: absolute;width: 100px; height: 100px; background: blue; top: 10px;left:10px;} 

<div class="test"> <div class="t2"> <div class="t3"></div> </div> </div>

 

使用overflow 的結果，如下圖：

.test{ width: 300px; height: 300px; background: red;position: relative;top:10px;left:10px;overflow: hidden;}
.t2{ width: 200px; height: 200px; background: black; position: absolute; top: 200px;left:10px;}
.t3{ width: 100px; height: 100px; background: blue; position: absolute;top: 10px;left:10px;}


<div class="test">
    <div class="t2">
        <div class="t3"></div>
    </div>
</div>

　

 

　

ps：所以有絕對定位少用overflow

 

3. 絕對定位：以父節點為參考，如果不設位置，則默認是他原來的位置，相對定位是以原來的位置為參考

<div style="position: relative; background: red;width: 400px;height: 200px;">
    <p  style=" background: black;width: 100px;height: 50px;">dfsf</p>
    <div style="position: absolute; background: yellow;width: 100px;height: 50px;">
    </div>
</div>