title: Logo keep shifting and changing size on different screen size in CSS. Also How to access css components in multiple layer
body: <p>Recently I am into <strong>CSS</strong> art. Very new to CSS.  I created an iPhone back. But the only problem is the apple logo keeps shifting its position with different screen sizes. Is there any solution?</p>
  <p>Also I want to add that How to access</p>
  <blockquote>
  <p>CSS components in a multilayer</p>
  </blockquote>
  <p>Suppose I have 4 divs on top of each other colored as (red, blue, green, yellow). All the divs stacked in color order. Now yellow is on top while red is all the way down. How can I set red colored div on top or green on? Is it <strong>possible</strong> by z-index only?
  Below is my code pen link.
  <a href="https://codepen.io/himanshu-pal/pen/vYejNZW?editors=1000" rel="nofollow noreferrer">enter link description here</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*
  {
    margin: 0;
    padding: 0;
    box-sizing: border-box;      
  }
  
  body
  {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  
  .canvas
  {
    height: 100vh;
    width: 100%;
    background: linear-gradient(120deg, #65799b,  #5e2563);
    position : relative;
    top: 10vmin;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
  }
  
  .back
  {
    position: relative;
    height: 45vmin;
    width: 22vmin;
    background: linear-gradient(360deg, #9ab, #bdf);
    border: 0.5vmin double #000;
    border-radius: 3vmin;
    
  }
  
  .icon
  {
    position: absolute;
    color: #cef;
    top: 15vmin;
    left: 7vmin;
    font-size: 40px;
  }
  
  ion-icon
  {
    
  }
  .camra-module
  {
    position: absolute;
    height: 10vmin;
    width: 10vmin;
    background: linear-gradient(360deg, #8ab, #bcd, #cde);
    opacity: 0.5;
    border-radius: 2vmin;
    top: 1.2vmin;
    left: 1.2vmin;
    border: 0.3vmin ridge #abc;
  }
  
  .cam1
  {
    position: absolute;
    height: 4.2vmin;
    width: 4.2vmin;
    background: #000;
    border-radius: 50%;
    top: 0.2vmin;
    left: 0.2vmin;
    border: 0.3vmin double #cef;
  }
  
  .cam2
  {
    position: absolute;
    height: 4.2vmin;
    width: 4.2vmin;
    background: #000;
    border-radius: 50%;
    top: 4.5vmin;
    left : -0.2vmin;
    border: 0.3vmin double #cef;
  }
  
  .cam3
  {
    position: absolute;
    height: 4.2vmin;
    width: 4.2vmin;
    background: #000;
    border-radius: 50%;
    top: -2.7vmin;
    left: 4.2vmin;
    border: 0.3vmin double #cef;
  }
  
  .innercam1
  {
    position: absolute;
    height: 2vmin;
    width: 2vmin;
    background: #123;
    border-radius: 50%;
    top: 0.8vmin;
    left: 0.8vmin;
  }
  
  .innercam2
  {
    position: absolute;
    height: 2vmin;
    width: 2vmin;
    background: #123;
    border-radius: 50%;
    top: 0.8vmin;
    left: 0.8vmin;
  }
  
  .innercam3
  {
    position: absolute;
    height: 2vmin;
    width: 2vmin;
    background: #123;
    border-radius: 50%;
    top: 0.8vmin;
    left: 0.8vmin;
  }
  
  .innercam1:before
  {
    content: '';
    position: absolute;
    height: 1.4vmin;
    width: 1vmin;
    background: transparent;
    border-radius: 50%/60%;
    top: 0.3vmin;
    left: 0.4vmin;
    border-left: 0.5vmin solid #19b;
  }
  
  .innercam1:after
  {
    content: '';
    position: absolute;
    height: 1.4vmin;
    width: 1vmin;
    background: transparent;
    border-radius: 50%/60%;
    top: 0.3vmin;
    left: 0.1vmin;
    border-right: 0.5vmin solid #19b;
  }
  
  .innercam2:before
  {
    content: '';
    position: absolute;
    height: 1.4vmin;
    width: 1vmin;
    background: transparent;
    border-radius: 50%/60%;
    top: 0.3vmin;
    left: 0.4vmin;
    border-left: 0.5vmin solid #19b;
  }
  
  .innercam2:after
  {
    content: '';
    position: absolute;
    height: 1.4vmin;
    width: 1vmin;
    background: transparent;
    border-radius: 50%/60%;
    top: 0.3vmin;
    left: 0.1vmin;
    border-right: 0.5vmin solid #19b;
  }
  
  .innercam3:before
  {
    content: '';
    position: absolute;
    height: 1.4vmin;
    width: 1vmin;
    background: transparent;
    border-radius: 50%/60%;
    top: 0.3vmin;
    left: 0.4vmin;
    border-left: 0.5vmin solid #19b;
  }
  
  .innercam3:after
  {
    content: '';
    position: absolute;
    height: 1.4vmin;
    width: 1vmin;
    background: transparent;
    border-radius: 50%/60%;
    top: 0.3vmin;
    left: 0.1vmin;
    border-right: 0.5vmin solid #19b;
  }
  
  .flesh
  {
    position: absolute;
    height: 2vmin;
    width: 2vmin;
    border-radius: 50%;
    background: #fdc;
    border: 0.5vmin double #bbb;
    left: 6vmin;
    top: 0.3vmin;
  }
  
  .lider
  {
     position: absolute;
    height: 2vmin;
    width: 2vmin;
    border-radius: 50%;
    background: #000;
    left: 6vmin;
    top: 7.2vmin;
  }
  
  .microphone
  {
     position: absolute;
    height: 0.6vmin;
    width: 0.6vmin;
    border-radius: 50%;
    background: #000;
    left: 8.4vmin;
    top: 7vmin;
  }
  
  .volup
  {
    position: absolute;
    height: 4vmin;
    width: 0.3vmin;
    background: #bdf;
    left: 21.5vmin;
    top: 11vmin;
    border-radius: 0 1vmin 1vmin 0;
  }
  
  .voldown
  {
    position: absolute;
    height: 4vmin;
    width: 0.3vmin;
    background: #bdf;
    left: 21.5vmin;
    top: 16.5vmin;
    border-radius: 0 1vmin 1vmin 0;
  }
  
  .silent
  {
    position: absolute;
    height: 2.3vmin;
    width: 0.3vmin;
    background: #bdf;
    left: 21.5vmin;
    top: 6.8vmin;
    border-radius: 0 1vmin 1vmin 0;
  }
  
  .lock
  {
    position: absolute;
    height: 6.5vmin;
    width: 0.3vmin;
    background: #bdf;
    right: 21.6vmin;
    top: 12vmin;
    border-radius: 1vmin 0 0 1vmin;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"&gt;&lt;/script&gt;
  &lt;div class="canvas"&gt;
    
    &lt;div class="back"&gt;&lt;i class="icon"&gt;&lt;ion-icon name="logo-apple"&gt;&lt;/ion-icon&gt;&lt;/i&gt;
      &lt;div class="camra-module"&gt;
        &lt;div class="cam1"&gt;
          &lt;div class="innercam1"&gt;&lt;/div&gt;
          &lt;div class="cam2"&gt;
            &lt;div class="innercam2"&gt;&lt;/div&gt;
            &lt;div class="cam3"&gt;
              &lt;div class="innercam3"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class="flesh"&gt;&lt;/div&gt;
        &lt;div class="lider"&gt;&lt;/div&gt;
        &lt;div class="microphone"&gt;&lt;/div&gt;
        
      &lt;/div&gt;
      
      &lt;div class="volup"&gt;&lt;/div&gt;
      &lt;div class="voldown"&gt;&lt;/div&gt;
      &lt;div class="silent"&gt;&lt;/div&gt;
      &lt;div class="lock"&gt;&lt;/div&gt;
    &lt;/div&gt;
    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>