How to create a overlap effect using html and css

In this tutorial ,how to create a overlap effect using html and css. An element with the position absolute is related to nearest position and can overlap the elements in simply method.

Html Code:

<div class="sh_design">
<span>S</span>
<span>T</span>
<span>R</span>
<span>A</span>
<span>N</span>
<span>G</span>
<span>E</span>
<span>R</span>
</div>
<div class="th_design">
<span>T</span>
<span>H</span>
<span>I</span>
<span>N</span>
<span>G</span>
<span>S</span>
</div>

Style:

  
*
{
margin:0;
padding:0;
}

body
{
background-color:#1f1c32;
font-family: 'Poppins', sans-serif;
}
.sh_design{
position:absolute;
transform:translate(-50%,-50%);
top:32%;
left:50%;
width:100%;
text-align:center;
color:#fff;
}
.Th_design{
position:absolute;
transform:translate(-50%,-50%);
top:65%;
left:50%;
width:100%;
text-align:center;
color:#fff;
}
.sh_design > span{ 
color:transparent;
font-size:16em;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;
 text-shadow:
            0.2rem 0.2rem 0.5rem rgba(255,255,255,0.3),
            0.2rem 0.2rem 0.5rem rgba(255,255,255,0.3),
            0 0 2rem  #FF4400,
            0 0 4rem  #FF4400,
            0 0 6rem,
            0 0 8rem,
            0 0 10rem;

}

.th_design > span{ 
color:transparent;
font-size:15em;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #fff;
 text-shadow:
            -0.2rem -0.2rem 0.5rem rgba(255,255,255,0.3),
            0.2rem 0.2rem 0.5rem rgba(255,255,255,0.3),
            0 0 2rem  #FF4400,
            0 0 4rem  #FF4400,
            0 0 6rem ,
            0 0 8rem  ,
            0 0 10rem ;
}

.sh_design > span:not(:first-child){
margin-left:-0.15em;
}
.th_design > span:not(:first-child){
margin-left:-0.12em;
}
  
  

overlap Strokes:

.sh_design > span{ 
color:transparent;
font-size:16em;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #fff; 
text-shadow: -0.08em 0.03em 0.10em rgba(0,0,0,0.9);
}

.th_design > span{ 
color:#transparent;
font-size:16em;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #fff;
text-shadow: -0.08em 0.03em 0.10em rgba(0,0,0,0.9);

}

Overlap shadow Effect:

.sh_design > span{ 
color:#fff;
font-size:16em;
text-shadow: -0.08em 0.03em 0.10em rgba(0,0,0,0.9);
}

.th_design > span{ 
color:#fff;
font-size:16em;
text-shadow: -0.08em 0.03em 0.10em rgba(0,0,0,0.9);

}