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>

父母双方的定位看起来都不错，但我无法找到将标题移到whiteBox之上的方法。我玩了z-index的组合，但我读过它不可能同时调整孩子的z-index和父母。

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

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

Answer 1

1-从父div中删除z-index。
2-将z-index添加到白盒div中，我选择值20.
3-绝对定位.text类并确保它的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

溢出的兄弟姐妹＆＃39;孩子们正确的方式

1 个答案: