CSS position question. I want to put two images together on the same position

Question

I want to put two images together like enter image description here with responsive. I used relative position for this, but whenever screen become smaller, it goes like this enter image description here I want to use two different images because I'm gonna animate these seperately.

.img_box{
   width: 100%
}

.desk {
  position: relative;
  width: 90%;
  bottom:-30%;
 
}

.person {
  position: relative;
  width: 90%;
  bottom:20%;
  right: 25%;
}

<div class="img_box">
  <img class="desk" src="https://material.angular.io/assets/img/examples/shiba1.jpg">
  <img class="person" src="https://material.angular.io/assets/img/examples/shiba2.jpg">
</div>

I tried to use absolute, but it doesn't work well for responsive I think

Try putting the desk image position relative, then put the person on position absolute, with the x/y positioning in terms of % of the desk image. That should then adjust as the actual size changes. — A Haworth, Dec 19 '22 at 11:27

Steve · Accepted Answer · 2022-12-19T16:54:02.457

I would suggest creating a new stacking context by adding position: relative; to your .img_box wrapper element, then absolutely position any images ("layers") that you use inside of that new stacking context.

For example:

.img_box {
  /* Setting to position: relative creates a new stacking context */
  position: relative;
  width: 100%;
  max-width: 400px;
}

.img_layer {
  /* Positions absolutely each payer inside the .img_box stacking context */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.person {}
.desk {}

<div class="img_box">
  <img class="img_layer desk" src="https://assets.codepen.io/817230/back.gif">
  <img class="img_layer person" src="https://assets.codepen.io/817230/front.gif">
</div>

This way, adding position: absolute; to any layers will set their position relative to their parent (and not the document). You will be able to position/scale your wrapper element however you'd like and all children will follow suit accordingly.

You can still use .person and .desk for additional styling on the respective layers and/or setting z-index, etc., which is why I left them.

I'm a bit onfused, how does fixing the width and height in px values make it responsive? — A Haworth, Dec 19 '22 at 11:19

score 0 · Answer 2 · answered Dec 20 '22 at 22:54

If I understood it correctly, you want to align the images to the center, both vertically and horizontally. You also want to move them together, I mean, without creating some offset between them when you resize the window. So, I would do something like this:

  body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }

  .container {
    position: relative;
    height: 100vh;
    width: 100vw;
  }

  .desk {
    width: 30%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .person {
    width: 30%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

for an HTML like this:

<body>
    <div class="container">
      <img class="desk" src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="" />
      <img class="person" src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="" />
    </div>
</body>

Take a look at CSS Layout - Horizontal & Vertical Align to learn more about the CSS alignment, and Layout and the containing block to learn how percentage values are calculated for positioned elements.

CSS position question. I want to put two images together on the same position

2 Answers2