How to position 3 divs on top of a background with one being at the bottom, second one under the thi-CodePudding

Every time I try to put something like position:absolute or div::before, div::after. It seems like it does not work. Is this because it's not flex or position:center is not set? Also:

z-index: -1;

What does it do exactly? can i just do this?

#firstdiv::before,#firstdiv::after
 {
      width:120;
      height:120;
      background: #F3AC3C;
      margin: 150 0 0 80;
      border-radius: 50% 0 50% 50%; 

    }  
#firstdiv::before,::after
 {
      width:120;
      height:120;
      background: #F3AC3C;
      margin: 150 0 0 80;
      border-radius: 50% 0 50% 50%; 

    }

/1/ the wrong code:

<html lang="en">
<head>
<meta charset="UTF-8"
<meta name="viewport" content="width=device-width", initial-scale=1.0">
  <title>Document</title>
  
  <style>
    body {
      background: #0B2429;
      margin: 0;
    }
    #firstdiv {
      width:120;
      height:120;
      background: #F3AC3C;
      margin: 150 0 0 80;
      border-radius: 50% 0 50% 50%; 
      
    }  
 #seconddiv{
         width:120;
      height:120;
      background: #998235;
      margin: -180 100 0 140;
        border-radius:  50% 0 50% 50%;
            position:absolute
       }
    
    #thirddiv{
         width:120;
      height:120;
      background: #F3AC3C;
      margin: -240 100 0 200;
        border-radius:  50% 50% 50% 50%;
       }
 </style>
  </head>
  <body>
    <div id ="firstdiv"></div>
    <div id ="seconddiv"></div>
    <div id ="thirddiv"></div>
  </body>
</html>

/2/ the right one is made by T. Safa Elmalı. Trying to make use of his code and implement in mine so it matches the picture perfectly. The right code:

<!DOCTYPE html>
<html lang="en">
  <head>
    
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Target #5 Acid Rain</title>
  </head>
  <style>
    body {
      background: #0b2429;
      display: flex;
      justify-content: center;
      align-items: center;
      /* If you open this file in your browser, please comment out this property to see the shape clearly */
      /* min-height: 100vh; */
    }
/* middle one */
    div {
      width: 120px;
      height: 120px;
      background: #998235;
      border-radius: 50% 0% 50% 50%;
      position: relative;
    }
/* first one(bottom one) */
    div::before,
    div::after {
      content: "";
      position: absolute;
      width: 120px;
      height: 120px;
      background: #f3ac3c;
      border-radius: 50% 0% 50% 50%;
      left: -60px;
      top: 60px;
    }
/* last one(top one)*/
    div::after {
      left: 60px;
      top: -60px;
      z-index: -1;
      border-radius: 50%;
    }
  </style>
  <body>
    <div></div>
  </body>
</html>

These questions are not required but will be helpful. The solution to that image would help the most.

Thanks to Duenna

/3/ If anyone would want to use it when it is actually functional:

<html lang="en">
<head>
<meta charset="UTF-8"
<meta name="viewport" content="width=device-width", initial-scale=1.0">
  <title>Document</title>
  
  <style>
    body {
      background: #0B2429;
      margin: 0;
    }
#firstdiv {
      width:120px;
      height:120px;
      background: #F3AC3C;
      margin: 150 0 0 80;
      border-radius: 50% 0 50% 50%; 
      position: relative;
      z-index: 3;
}  

 #seconddiv{
      width:120px;
      height:120px;
      background: #998235;
      margin: -180 100 0 140;
      border-radius:  50% 0 50% 50%;
      position:relative;
      z-index: 2;
}

#thirddiv{
      width:120px;
      height:120px;
      background: #F3AC3C;
      margin: -180 100 0 200;
      border-radius:  50% 50% 50% 50%;
      position: relative;
      z-index: 1;
}
    </style>
  </head>
  <body>
    <div id ="firstdiv"></div>
    <div id ="seconddiv"></div>
    <div id ="thirddiv"></div>
  </body>
</html>

CodePudding user response：

The solution is quite simple seeing as you've got 3 divs, just give each one a stacking z-index.

For example...

#firstdiv {
      width:120px;
      height:120px;
      background: #F3AC3C;
      margin: 150 0 0 80;
      border-radius: 50% 0 50% 50%; 

      // This is new stuff
      position: relative;
      z-index: 3,
}  

 #seconddiv{
      width:120px;
      height:120px;
      background: #998235;
      margin: -180 100 0 140;
      border-radius:  50% 0 50% 50%;
      position:relative

      // This is new stuff
      z-index: 2,
}

#thirddiv{
      width:120px;
      height:120px;
      background: #F3AC3C;
      margin: -240 100 0 200;
      border-radius:  50% 50% 50% 50%;
    
      // This is new stuff
      position: relative;
      z-index: 1,
}