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

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

我相信这是件很简单的事，但我一辈子都看不懂它是什么

我希望看到位置：绝对div（class-2）位于位置：相对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="class-1">
    <div class="class-2">class-2</div>
</div>

二级

绝对定位101：绝对定位元素相对于最近定位（相对、绝对或固定）的父元素定位；如果没有，则使用

（原始标记就是这样）

---

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

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

二级

绝对定位101：绝对定位元素相对于最近定位（相对、绝对或固定）的父元素定位；如果没有，则使用

（原始标记就是这样）

它不在里面

<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>

上课前
一级
二级
课后

它不在里面

<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>

上课前
一级
二级
课后

---

您的2班不在1班之内。在第二节课之后放置

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

二级

您的2级不在1级之内。在第二节课之后放置

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

二级

哦，比我快+哦，比我快+1.