如何使用CSS将子元素定位到父元素的顶部

在我的情况下，有两个盒子，每个盒子都有一个小盒子。父框和子框都是绝对定位的。我的要求是把小盒子放在第一个盒子里，叠在第二个大盒子的上面。如何使用z-index实现。或者我们有没有其他方法可以做到这一点

HTML

<div id="boxes">
  <div id="dd-demo-1" class="dd-demo">
    <strong>A</strong>
    <br>position:
    <span>absolute</span>
    <br>z-index:
    <span>12</span>
    <div id="div1">
      <strong>a</strong>
      <br>position:
      <span>absolute</span>
      <br>z-index:
      <span>14</span>
    </div>
  </div>
  <div id="dd-demo-2" class="dd-demo">
    <strong>B</strong>
    <br>position:
    <span>absolute</span>
    <br>z-index:
    <span>not set</span>
    <div id="div2">
      <strong>b</strong>
      <br>position:
      <span>absolute</span>
      <br>z-index:
      <span>not set</span>
    </div>
  </div>
</div>

---

代码笔链接：

我已经更改了您的CSS的某些部分

更新了这些样式

#dd-demo-1 {
  z-index: 12;
}

#div1 {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 !important;
}

#dd-demo-1{
z指数：12；
}
#第一组{
位置：绝对位置；
底部：0；
左：50%；
转化：translateX（-50%）；
边距：0！重要；
}
#dd-demo-2{
位置：绝对位置；
顶部：235px；
z指数：12；
}
#第二组{
位置：绝对位置；
左：30px；
顶部：29px；
z指数：12；
}
.dd演示{
文本对齐：居中；
边框：1px插页#ccc；
颜色：#fff；
高度：14em；
宽度：15em；
垫面：5px；
位置：绝对位置；
z指数：12；
}
#第一组，
#阿菲尔德{
背景色：#00ffff；
颜色：#000000；
}
#dd-demo-1，
#外地{
背景色：#0066ff；
颜色：#ffffff；
}
#dd-demo-2，
#贝菲尔德{
背景色：#006600；
颜色：#ffffff；
}
#第二组，
#Bbfield{
背景色：#00ff00；
颜色：#000000；
}
#第一组，
#第二组，
#第三组{
文本对齐：居中；
保证金：1em自动；
身高：6em；
宽度：11em；
边界：1px起点#ccc；
}

A

职位：
绝对的

z指数：
12
a

职位：
绝对的

z指数：
14
B

职位：
绝对的

z指数：
未设定
b

职位：
绝对的

z指数：
未设定

更改如下：

#div1 {
  position: absolute;
  z-index: 14;
  left: 42px;
  top: 165px; <--------Removed
  bottom: 0;  <--------Added
  margin-bottom: 0!important;
  //If you do not want space between small box and big box.
}

A

职位：
绝对的

z指数：
12
a

职位：
绝对的

z指数：
14
B

职位：
绝对的

z指数：
未设定
b

职位：
绝对的

z指数：
未设定

#div1 {
  position: absolute;
  z-index: 14;
  left: 42px;
  top: 165px; <--------Removed
  bottom: 0;  <--------Added
  margin-bottom: 0!important;
  //If you do not want space between small box and big box.
}