Home/ Questions/Q 7599063
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T22:34:02+00:00

I have a div called target which is centred and displayed over a google

  • 0

I have a div called target which is centred and displayed over a google map when you pan to a map marker, i have since added a menu to the left of the map which means that when the google map pans to a marker it is no longer the centre of the screen.

I need to move the div to the right but I can’t seem to move it.

#target {
    position: fixed; 
    display: none; 
    width: 51px; 
    height: 51px; 
    top: 50%; 
    left: 50%; 
    margin: -40px 0 0 -26px; 
    background: url(../img/target.png) no-repeat center bottom; 
    z-index: 2;
}

Screenshot

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should be able to rectify your problem by playing a bit with the margin. Change the 4th value by adding a positive value so that it is greater than -26px. Such as:margin: -40px 0 0 20px;.

    The 4th value in margin specifies the left margin value, which will shift your div to the right.

    Alternatively

    You can wrap the map and target div in a separate div from the menu, but you must change the target position value to relative or absolute instead of fixed:

    <body>
    <div id="wrapper" style="position:relative;"> <!-- map and target wrapper div. make sure this is position: absolute OR relative so that positioning will reference this div. -->
        <div id="map">...</div>
        <div id="target"></div>
    </div>

    <div id="menu">
        ...
    </div>
</body>

    With this alternate solution, the target and the map are aligned to the same div, almost as if they’re in their own window.

    • 0