Logo keep shifting and changing size on different screen size in CSS. Also How to access css components in multiple layer

Question

Recently I am into CSS 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?

Also I want to add that How to access

CSS components in a multilayer

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 possible by z-index only? Below is my code pen link. enter link description here

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

<script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>
<div class="canvas">
  
  <div class="back"><i class="icon"><ion-icon name="logo-apple"></ion-icon></i>
    <div class="camra-module">
      <div class="cam1">
        <div class="innercam1"></div>
        <div class="cam2">
          <div class="innercam2"></div>
          <div class="cam3">
            <div class="innercam3"></div>
          </div>
        </div>
      </div>
      
      <div class="flesh"></div>
      <div class="lider"></div>
      <div class="microphone"></div>
      
    </div>
    
    <div class="volup"></div>
    <div class="voldown"></div>
    <div class="silent"></div>
    <div class="lock"></div>
  </div>
  
</div>

Does this answer your question? [Why can't an element with a z-index value cover its child?](https://stackoverflow.com/questions/54897916/why-cant-an-element-with-a-z-index-value-cover-its-child) — ATP, Jan 05 '22 at 14:07
I have never used *vmin*, interesting how many units of measurement CSS supports, I will do a mini-research on that — Laaouatni Anas, Jan 05 '22 at 14:09
You use vmin almost throughout but this is abandoned when you come to define the Apple icon size. On different viewports the relationship between vmin and px will be different so you need to position that icon and size it using vmin units otherwise it will 'wander' as you say. — A Haworth, Jan 05 '22 at 15:52
@ATP Ok I understand the fact that if we give any value to parent div it'll always be below the surface of the child. But what if I want to manipulate divs or just child divs. Is there any way? — Himanshu Pal, Jan 06 '22 at 06:02
Could you put up example code for the red, blue, green, yellow part of the question as I don't understand whether they are divs all siblings or whether they are greatgrandparent, grandparent, parent, child. — A Haworth, Jan 06 '22 at 06:24
@AHaworth As you can see there are different modules in HTML. Suppose I have a multilayer of the back like **back1** **back2** and **back3** then I have camera module the n cam1, 2 and 3 respectively. Now there are layers of backs before the camera module and cams. In order of back1->back2->back->camra-module->cam1-cam2-cam3. Now I want to move back2 to top of all the other children or back3 perhaps. How should I achieve this? — Himanshu Pal, Jan 07 '22 at 08:25
check out the last snippet https://stackoverflow.com/a/54903621/9977151 — ATP, Jan 07 '22 at 11:53

score 0 · Answer 1 · answered Jan 12 '22 at 11:58

0

Try this css, hope this will help you,

.icon {
    position: absolute;
    color: #cef;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 40px;
}

answered Jan 12 '22 at 11:58

Emdadul Haque

58
5

Thanks for the help. But I got the solution. The logo has different measurement parameters than the parent body. – Himanshu Pal Jan 13 '22 at 11:45

Logo keep shifting and changing size on different screen size in CSS. Also How to access css components in multiple layer

1 Answers1