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>