How to prevent CSS left/right properties from pushing window

Question

I am using the right and left properties to place tiny images on the edges of my page.

.class img {position:absolute;left:60%}

The above example places the image at the end of the screen on the right and only half of the image is visible but it also triggers a horizontal overflow making the page draggable towards the full width of the image.

I tried setting overflow to hidden but it didn't help.

Any ideas on how I can achieve this?

Answer 1

Any time you want to allow for items off screen, but prevent scrolling, you're going to have to restrict the user's viewport. This can usually be done by setting the overflow-x or overflow-y to hidden on the body.

/* The problem */
.off-screen {
  position: absolute;
  right: -50px;
  
  width: 100px;
  height: 100px;
  
  background-color: red;
}

/* The solution */
body {
  overflow-x: hidden;
}

<div class="off-screen"></div>

---

Note: Depending on your specific situation, this may need to be tweaked, but the concept is the same. I can update this to be more specific if you include more code in your initial post.

Answer 2

It sounds like you want your images to appear at the right edge of the screen. This should work:

.class img {
    position: absolute;
    right: 0;
}