当我在子块中使用position：absolute时它不会引用父块？

Question

在HTML中，当您在子块中使用position：absolute css属性时，绝对值不会从它从整个浏览器窗口引用的父标记中获取。 示例代码如下所示..

CSS

.parent {
    width: 400px;
    height: 400px;
    border: 1px solid green;
}

.child {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 1px solid red;
    bottom: 0px;
}

Answer 1

如果你想在父块中安排孩子，只需在父CSS中添加position:relative

Answer 2

父块需要将position设置为非静态值，即： position: absolute，position: fixed或position: relative。

您需要的值取决于布局应用程序。

Answer 3

.parent {
    width: 400px;
    height: 400px;
    border: 1px solid green;
    position:relative;/*this makes all my children s position relative to me */
}

.child {
    position: absolute;/* i have an absolute position and i am relative to my parent*/
    width: 200px;
    height: 200px;
    border: 1px solid red;
    bottom: 0px;
}

演示：http://jsfiddle.net/pGvvq/

标记：

<section class=parent>
    this makes all my children s position relative to me
    <article class=child>
        i have an absolute position and i am relative to my parent
    </article>
</section>

阅读更多http://css-tricks.com/absolute-positioning-inside-relative-positioning/