Question

有人可以向我解释为什么我的立场：绝对的div不服从我的立场：相对div？

我确信这很简单，但我不能为我的生活看到它是什么。

我想看到位置：绝对div（class-2）位于position：relative div（class-1）内。

这是以下代码的两个类完整链接：

div.class-1 {
    position:relative;
    background-color:#CCC;
    width: 500px;
    height: 200px;
}

div.class-2 {
    position:absolute;
    background-color:#C96;
    width: 250px;
    height: 100px;
    top:0px;
    right:0px;
}

HTML

<div class="wrapper">
    <div class="before">class-before</div>
    <div class="class-1">class-1</div>
    <div class="class-2">class-2</div>
    <div class="after">class-after</div>
</div>

http://jsfiddle.net/craig_wadman/HMwtN/

希望一切都有意义吗？

Answer 1

绝对定位元素必须嵌套在相对定位元素内，以获得所需结果：

<div class="class-1">
    <div class="class-2">class-2</div>
</div>

绝对定位101：绝对定位元素相对于最接近的（相对的，绝对的或固定的）父母定位;如果没有，则使用<body>（原始标记就是这种情况）。

Demo here

Answer 2

它不在里面。

<div class="wrapper">
    <div class="before">class-before</div>
    <div class="class-1">class-1
        <div class="class-2">class-2</div>
    </div>
    <div class="after">class-after</div>
</div>

DEMO HERE

Answer 3

你的2级不在1级。放下课后2。

 <div class="class-1">
    <div class="class-2">class-2</div>
</div>

为什么我的立场：绝对不服从我的立场：相对div？

3 个答案: