如何克服html元素的重叠？ [复制]

Question

我正在尝试练习制作如上图。任何人都可以帮助我，如何克服这种类型的重叠，我认为z-index 将解决这种类型的问题，但我不明白如何？

但是直到现在我都能做出这个数字……

这是我的代码：

 * {
    margin: 0;
    background:#222730;
  }
  .a{
    max-width:100%;
    height:150px;
    margin-top:4.69em;
    background:#4CAAB3;
  }
  .b{
    width:250px;
    height:250px;
    margin-top:-12.5em;
    transform: rotate(45deg);
    margin-left:auto;
    margin-right:auto;

    background:#222730;
  }
  .c{
    width:150px;
    height:150px;
    margin-top:-12.5em;
    transform: rotate(45deg);
    margin-left:auto;
    margin-right:auto;
    background:#4CAAB3;
  }
   .d{
    background:white;
    margin-left:auto;
    margin-right:auto;
    width:50px;
    height:50px;
    z-index:;
    margin-top:-8em;
    
  }

<div class="sq">
<div class="a "></div>
<div class="b"></div>
<div class="c"></div>
<div class="d "></div>
</div>

Answer 1

如果点是div.d，则只需添加position: relative; 以将其显示在上方（以及其他样式，如背景、边框半径等）。

 * {
    margin: 0;
    background:#222730;
  }
  .a{
    max-width:100%;
    height:150px;
    margin-top:4.69em;
    background:#4CAAB3;
  }
  .b{
    width:250px;
    height:250px;
    margin-top:-12.5em;
    transform: rotate(45deg);
    margin-left:auto;
    margin-right:auto;

    background:#222730;
  }
  .c{
    width:150px;
    height:150px;
    margin-top:-12.5em;
    transform: rotate(45deg);
    margin-left:auto;
    margin-right:auto;
    background:#4CAAB3;
  }
   .d{
    background:white;
    margin-left:auto;
    margin-right:auto;
    width:50px;
    height:50px;
    z-index:;
    margin-top:-8em;
    position: relative;
    
  }

<div class="sq">
<div class="a "></div>
<div class="b"></div>
<div class="c"></div>
<div class="d "></div>
</div>

Z-index 仅适用于 position != static（相对、绝对等）。这里position: relative 和默认z-index: auto 很好，因为.d 是HTML 标记中的最后一个元素（.a-c 元素也有z-index: auto，但它们在你的标记中更高）。