Scale div position with viewport

Question

Im working on a spot the difference game.

So far I have an image with a difference shown by a red circle for testing.

I also have a dot (a button currently blue for testing but transparent for final) which will be what the user clicks on to get the difference.

I need help getting the dot to stay within the red circle when the browser window is resized.

Here is a link to my JSFIDDLE and the code is below

CSS:

.position001{position:relative}.block001{position:absolute;top:50px;left:673px;background-color:#7fffd4;border-radius:50%}.button001{background-color:transparent;border:1px solid transparent;width:45px;height:42px}.hide001{outline:0;border:none}

HTML

<div class="position001">
    <div id="board001">
        <button class="hide001" onclick="incorrect001()">
            <img src="https://stefan.admark.co.uk/jimny.jpg" width="90%" />
        </button>
        <div class="block001">
            <div id="disappear001">
                <button class="button001" onclick="correct001()"></button>
            </div>
        </div>
    </div>
</div>

Answer 1

This may help you to get going!

You have to use the height and width in vw since the screen changes and the size of the circle should also align with the view port.

Second, you can use Media query however I don't think that is a feasible option for you unless you're very good at handling media query when screen resolution changes, instead as suggested in my answer you can use vw for height, width and place another circle correctly, rest the property will take care of it.

 .position001 { position: relative; } .block001 { position: absolute; background-color: aquamarine; border-radius: 50%; top: 9.2%; left: 61.4%; width: 5vw; height: 5vw; } .button001 { background-color: transparent; border: 1px solid transparent; width: 45px; height: 42px; } .hide001 { border: none; outline: none; }

 <div class="position001"> <div id="board001"> <button class="hide001" onclick="incorrect001()"> <img src="https://stefan.admark.co.uk/jimny.jpg" width="90%" /> </button> <div class="block001"> <div id="disappear001"> <button class="button001" onclick="correct001()"></button> </div> </div> </div> </div>

Answer 2

You should put the blue dot and red circle under a div element. Then let the div's position be relative , and the dot and circle's position absolute And you can then position the div in order to position both the red circle and the blue dot. They will always be in the same area, above each other.

This is because the absolute position will make an elements position at 0, 0 regardless if there is another element there, or even 100 elements. But because absolute position can be modified if the element is under a relatively-positioned element, we can take advantage of that to easily position both the dot and the circle, and place them on top of each other.

Graphical demonstrations in here: https://css-tricks.com/how-to-stack-elements-in-css/