How do we get (Santa) image to be within desired Zone

HTML & CSS
2

Hi @dean_ansari, Welcome to the forum!

I think the inconsistent place of the Santa image could be that it relies on its left and top auto coordinates. It is a good idea to move the image by margins, but it will move referring to the auto position that could shift depending circumstances, see @PaulOB’s thread : dcode-understanding-css-positioning

Give Santa the coordinates for the margins to move from, and also give the parent container a position to refer the coordinates to.

I suggest you try something like e.g.:


.bg_w_foto {
    position: relative; /* add position */
}
.santa_float{
    position: absolute;
    bottom: 0; /* add suitable coordinate */
    left: 50%; /* add suitable coordinate */
    margin-bottom: -5em;
    margin-left: -30em;
}

Post what you try to do to make it work as you intend.

EDIT)

I don’t think that is necessary when Santa knows where he is.

EDIT)
Clarifying: Use the margin to move the same coordinate in neg or pos direction.

1 Like