New to CSS, stuck on a particular challenge, looking for help

I'm hoping someone can help me out here. I've been able to muddle through a lot so far, and have a pretty decent little (local) website going, but I'm hung up on one particular issue.

I have broken my site down into DIVs. Each has a separate "class" that CSS nicely and prettily configures for me. So far so good. I have an image that I want to overlap one of the DIVs. Think of it like a picture of a puppy with the paws hanging over the DIV box below it. The paws are over top of part of the lower DIV box, like the dog is peeking over at you, or is standing behind that box.

I've managed to make this happen. It's a simple img link (classed, so I can CSS it individually) to the puppy. It appears before the DIV I want it to overlap. Here is the CSS that makes it work:

img.critter {
position:absolute;
right:20%;
top:155px;
z-index:100;
max-width:281px;
max-height:150px;

}

You can almost immediately see the problem: it looks great on my screen size, in a maximized screen. The moment the screen shrinks or resizes, the image is in the wrong place and the illusion is broken. Herein lies my issue.

Is there any way to "lock" the image in place, relative to the div box? I would like the paws to be "locked" to the top right side of the DIV box, regardless of how the page is resized. It should overlap along the same horizontal line regardless of the size.
Here is a snippet of what I have. The paws over lap the top of the main DIV box, and there is "creative whitespace" to the right.

Is what I want possible? I would like to steer away from changing the picture itself - I don't have any decent image editing software on this computer at the moment. Just to make parts of it transparent, I had to use PowerPoint <shudder>.

Any help would be appreciated.

Epic visual tool

Epson 5030UB 2D/3D 1080p 3LCD Projector Submitted January 05, 2016 at 02:09PM by knylok http://ift.tt/1mCOJ84