How to overcome from overlapping of html elements?

Question

I am trying practicing to make like above figure. Anyone can help me on this, how to overcome from this type of overlapping , I think that z-index will solve this type of problem but I don’t understand how?

But till now I am able to make this figure…

Here's my code:

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

For a `z-index` to work, the position must not be `static`. – NullDev Feb 26 '21 at 10:26 — NullDev, Feb 26 '21 at 10:26

pavel · Answer 1 · 2021-02-26T10:34:11.040

If the dot is div.d, than just add position: relative; to show it above (and other styles like background, border-radius, etc.).

 * {
    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 works with only position != static (relative, absolute, etc.). Here position: relative and default z-index: auto is fine because .d is the last element in HTML markup (.a-c elements has z-index: auto too, but they are higher in your markup).

the default value of z-index is not 1 (and not 0). it's `auto` — Temani Afif, Feb 26 '21 at 10:30
@TemaniAfif: yes, my mistake... It changes nothing on the rest of my post, in OP CSS was no z-indexes specified, all elements have default value (and it doesn't matter if auto or 1). But thanks. — pavel, Feb 26 '21 at 10:35

How to overcome from overlapping of html elements?

1 Answers1