html - 当我在子块中使用位置：绝对时它不引用父块？

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

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

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/