CSS 嵌套绝对定位

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

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

使用overflow 的结果，如下图：

.test{  300px; height: 300px; background: red;position: relative;top:10px;left:10px;overflow: hidden;}
.t2{  200px; height: 200px; background: black; position: absolute; top: 200px;left:10px;}
.t3{  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; 400px;height: 200px;">
    <p  style=" background: black; 100px;height: 50px;">dfsf</p>
    <div style="position: absolute; background: yellow; 100px;height: 50px;">
    </div>
</div>