DIV的CSS定位(相对于绝对值)

在课堂上我们学到了如果我有两个div:一个包装div(让我们称之为div A),它被定义为position:relative;和另一个div,div B,它位于div A的位置:绝对;

会发生什么,现在div B的位置取决于div A的位置.这意味着现在div B的0,0点不是浏览器的0,0点,而是div A的点.所以,如果我将div A向右移动20个像素,并向右移动B 30个像素,div B将在浏览器的点0,0右侧50个像素;

现在,我的问题是:如果我有3个div,该怎么办? Div A的位置:relative ;,在div B中,它的位置是:绝对的,另一个div(div C)的位置是:absolute;.现在,div C将如何表现?它的位置0,0是div A还是div B的位置?

提前致谢.

码:

<style type = "text/css">
#a {
position: relative;
left: 20px;
}

#b {
position:absolute;
left: 20px
}

#c {
left: 20px
position:absolute;
}
</style>
<div id = "a">
    <div id = "b">
        <div id = "c">
        test
        </div>
    </div>
</div>

解决方法

从这个 JSFiddle可以看出,“C”div的位置与其父亲“B”相对
position: absolute;

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效