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

Question

在课堂上,我们学到了,如果我有两个div:一个包装DIV(我们称之为DIV A)这是定义为position: relative;与另一个div的div B这里面DIV A用position: absolute;.

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

现在,我的问题是:如果我有3个div,该怎么办？div元素这就是position: relative;,在它的div B那是position: absolute,和专区内B,另一个DIV(DIV C)用position: 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>

Answer 1

从这个JSFiddle可以看出,"C"div的位置与其父亲"B"相对

position: absolute;

Answer 2

我没有太多可以添加这些伟大的答案,但这里有一篇文章,帮助我理解这个概念.http://alistapart.com/article/css-positioning-101

编辑:

那篇文章涵盖了一个位置绝对的div位于其最近的祖先(父,祖父母等)的内部网格上,它是固定的,相对的或绝对的.如果没有,则它与html文档相关,但请注意它的行为仍然与固定不同.它还涵盖了三种位置类型之间的关键差异以及静态位置类型.

static - 这是它为子项绝对定位div创建的网格的默认位置.您不能使用css属性top left right或bottom.

relative - 为后代(儿童,孙子等)绝对定位的div创建一个网格.您可以使用顶部,左侧,右侧和底部,但它们"相对"移动到之前的位置.当使用顶部,左侧,右侧和底部时,其他元素仍然会在之前的位置.

绝对 - 为后代(儿童,孙子等)绝对定位的div创建一个网格.您可以使用顶部,左侧,右侧和底部,但它们相对于最近的祖先(父级,祖父级等)网格移动它.请记住,网格是由固定,绝对和相对元素创建的.使用顶部,左侧,右侧和底部时,元素将脱离文档流.(这意味着其他项目通过它.)

fixed - 为儿童绝对定位div创建一个网格.您可以使用顶部,左侧,右侧和底部,但它们相对于浏览器移动它.使用顶部时,左,右和底部脱离文档流.(这意味着其他项目通过它.)

Answer 3

Div B - 任何绝对定位的元素根据它最接近的位置(绝对,相对或固定)父元素定位.