When making layout faced with such a puzzle. I try to place the selected element inside the container using the property position: absolute; But then a horizontal scroll bar appears when the screen is reduced. It is impossible to displace an element with media queries, this will violate the design of the site. Are there any solutions to this issue? Or is it a designer miss?

item placement

    1 answer 1

    Place it in a container with a width of 100%, and put the container overflow:hidden; and position: relative; or position: absolute; . Set the height of the container so that the picture fits entirely.

     body{padding:0; margin:0;} .container { overflow: hidden; height: 250px; position: relative; } .abs { position: absolute; right: -50px; top: 50px; } 
     <div class="container"> <img class="abs" src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> </div>

    There is another option to set overflow-x: hidden; in body . However, make sure that this does not cause problems in the future.

     body{ padding:0; margin:0; overflow-x: hidden; } .abs { position: absolute; right: -50px; top: 50px; } 
     <img class="abs" src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">

    • one
      overflow: hidden; will crop the image above and below - soledar10
    • @ soledar10 added a comment about this - Crantisz
    • Thank you very much! Indeed, everything works as it should. - Artur Solo