满满的兄妹children正道

Question

我有一个圆形 div 代表白色圆圈和徽标。好像是我想要的。

<div class="whiteCircle">
  <div class="image" style="background-image: url('https://www.postnl.nl/Images/marker-groen-PostNL_tcm10-72617.png?version=1');"></div>
</div>

.whiteCircle {
    width: 65px;
    height: 65px;
    background-color: white;
    border-radius: 50px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

然后，我为其他内容创建了另一个矩形 div 作为 whiteBox 的兄弟。

<div class="box">
  <div class="text">
    <h2>Heading</h2>
  </div>
</div>

两个 parent 的位置看起来不错，但是我想不出将标题移动到 whiteBox 上方的方法。我玩过 z-index 的组合，但我读到不可能同时调整 children 的 z-index 和 parent。

我做错了什么？实现它的正确方法是什么？

https://codepen.io/anon/pen/mwKrdG

Answer 1

1- 从 parent div 中删除 z-index。
2- 将 z-index 添加到 white-box div，我选择值 20。
3- 绝对定位你的 .text class 并确保它的 z-index 大于 20;

css

body {
  background-color: lightblue;
}

.whiteBox {
    width: 65px;
    height: 65px;
    background-color: white;
    border-radius: 50px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index:20;
}

.image {
    text-align: center;
    height: 100%;
    background: no-repeat center center;
}

.container {
    width: 275px;
    height: 350px;
    background-color: white;
    margin: 0 auto;
    position: absolute;

    left: 0;
    right: 0;
    margin: 0 auto;
    top: 38px
}

.text {
  text-align: center;
      z-index: 25;
    position: absolute;
    left: 35%;
}

https://codepen.io/anon/pen/OgEROK

满满的兄妹children正道

Overflowing siblings' children the proper way

css

z-index

css-position