在一个元素上定位绝对和相对？

Question

我想将div相对于它的父div定位，并给这个div一个位置：relative;这样它的子元素就可以定位到这个元素。

我没有亲自测试过，但是有可能吗？什么是最好的方法呢？

Answer 1

是的，这是可能的。

制作第一个div position:relative和接下来的2个div position:absolute

<强> FIDDLE

<div class="one">
    <div class="two">
        <div class="three">    
        </div>
    </div>
</div>

CSS

.one
{
    position:relative;
    width: 200px;
    height: 200px;
    background: yellow;
}
.two
{
    position:absolute;
    top:20px;
    left:20px;
    width: 100px;
    height: 100px;
    background: pink;
}
.three
{
    position:absolute;
    top:20px;
    left:20px;
    width: 50px;
    height: 50px;
    background: brown;
}