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

【问题标题】：Why is my position:absolute not obeying my position:relative div?为什么我的立场：绝对不服从我的立场：相对 div？
【发布时间】：2018-02-06 04:16:43
【问题描述】：

谁能向我解释一下为什么我的立场：绝对 div 不服从我的立场：相对 div？

我确信这很简单，但我一辈子都看不到它是什么。

我希望看到 position:absolute 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/

希望这一切都有意义吗？

【问题讨论】：

标签： html css css-position

【解决方案1】：

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

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

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

Demo here

【讨论】：

哦，抢我一步。 +1

【解决方案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

【讨论】：

【解决方案3】：

您的 2 级不在 1 级内。放置后类 2。

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

【讨论】：