position

In the block ( .result-wrapper ) I have the T-shirt itself and the position: relative block. In addition to the T-shirt, it has #selming and .example2 with absolute positioning and they are on top of the T-shirt.
But, when the screen resolution is 340px (on mobile phones), #selming and .example2 move out. Although the size of these blocks is less than 340px.
I do not understand what's the matter?

.result-wrapper { position: relative; height: 475px; } .example2 { display: inline-block; background: url(../blank-number.png) no-repeat; font-family: Arial, Helvetica, sans-serif; font-size: 31px; text-transform: uppercase; width: 202px; height: 63px; padding-top: 5px; left: 144px; top: 271px; position: absolute; } #selmimg { position: absolute; top: 75px; left: 135px; max-width: 250px; } 
 <div class="result-wrapper pull-left"> <img alt="Именная футболка с номером" title="Именная футболка с номером" src="img/shirt-white.png" id="main-img" width="480"> <div id="selmimg"><img src="logo/bmw.png" /></div> <div class="example2"> <div id="region"></div> <div id="bukva1"></div> <div id="bukva2"></div> <div id="nomer"></div> </div> </div>

  • there is no need for a relative - use absolute, rebuild quickly. From relative can move out of course, because this is a position with an offset - if the original position of the element has shifted, the element with relative has also shifted. I would not use absolute / relative here at all - block / inline-block / flex layout is more productive and more flexible. But your code should be rewritten for this) - Goncharov Alexander

1 answer 1

To solve your problem, you need to align the block as follows:

 left: 50%; margin-left: -100px; /* Где 100px - это половина ширины блока. */
  • 2
    Easier then transform: translateX(-50%); Than harkodit half width in margin-left . - Vadim Ovchinnikov
  • The same effect. Only then will the parent have a minus. Your comment does not make sense. - Vadizar
  • can you add the executable code then? Then the utility of the answer will increase. And at the same time, I clearly see it makes sense what I said or not. - Vadim Ovchinnikov