millet antoine millet antoine - 6 months ago 11
CSS Question

How can we prevent that when I resize my window, my images move using HTML-CSS?

How can we prevent that when I resize my window, my images move ?

when i resize my window my picture moove, the x and y position of my picture are the same but because the window is smaller, the coordinates relative to this window make my image is not at the desired location.

I already look for solutions that use both the positioning in "%" instead of "px" but also with the use of "position: relative;".
Unfortunately in my case I can't put this "position: relative;" because to overlay my pictures I had to of the set "position: absolute;".

Here my html code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="menuStyle.css" />
<title>Antoine</title>
</head>
<body>
<div id="bloc_page">
<div>
<img src="schema.png">
<img class="top" src="Linkedin.png" width="30" height="30">
</div>
</div>
</body>
</html>


Here my css code:

#bloc_page
{
width: 1097px;
margin: auto;
}

body
{
background-color: black; /* Le fond de la page sera noir */
}

.top {
position: absolute;
z-index: 1;
bottom:10%;
left: 80%;
}


Thank you in advance for you help.

Answer

Just you need to add position relative for "#bloc_page" id

 #bloc_page {
    position: relative;
    width: 1097px;
    margin: auto;
 }
Comments