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

Question

在我的情况下，有两个盒子，每个盒子都有一个小的子盒子。父盒和子盒都是绝对定位的。我的要求是将第一个盒子内的小盒子放在第二个大盒子的顶部。我们如何使用 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 {
  position: absolute;
  z-index: 12;
}

#div1 {
  position: absolute;
  z-index: 14;
  left: 42px;
  top: 165px;
}

#dd-demo-2 {
  position: absolute;
  top: 235px;
  z-index: 12;
}

#div2 {
  position: absolute;
  left: 30px;
  top: 29px;
  z-index: 12;
}

.dd-demo {
  text-align: center;
  border: 1px inset #ccc;
  color: #fff;
  height: 14em;
  width: 15em;
  padding-top: 5px;
  position: absolute;
  z-index: 12;
}

#div1,
#Aafield {
  background-color: #00ffff;
  color: #000000;
}

#dd-demo-1,
#Afield {
  background-color: #0066ff;
  color: #ffffff;
}

#dd-demo-2,
#Bfield {
  background-color: #006600;
  color: #ffffff;
}

#div2,
#Bbfield {
  background-color: #00ff00;
  color: #000000;
}

#div1,
#div2,
#div3 {
  text-align: center;
  margin: 1em auto;
  height: 6em;
  width: 11em;
  border: 1px outset #ccc;
}

Codepen 链接:https://codepen.io/nhjsph/full/NzgPVP/

Answer 1

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

更新了这些样式

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

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

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

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

#dd-demo-2 {
  position: absolute;
  top: 235px;
  z-index: 12;
}

#div2 {
  position: absolute;
  left: 30px;
  top: 29px;
  z-index: 12;
}

.dd-demo {
  text-align: center;
  border: 1px inset #ccc;
  color: #fff;
  height: 14em;
  width: 15em;
  padding-top: 5px;
  position: absolute;
  z-index: 12;
}

#div1,
#Aafield {
  background-color: #00ffff;
  color: #000000;
}

#dd-demo-1,
#Afield {
  background-color: #0066ff;
  color: #ffffff;
}

#dd-demo-2,
#Bfield {
  background-color: #006600;
  color: #ffffff;
}

#div2,
#Bbfield {
  background-color: #00ff00;
  color: #000000;
}

#div1,
#div2,
#div3 {
  text-align: center;
  margin: 1em auto;
  height: 6em;
  width: 11em;
  border: 1px outset #ccc;
}

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