CSS: position absolue échoue dans le redimensionnement

Question

Donc, j'ai cette image avec un style CSS:

.city1 { 
 
    position: absolute; 
 
    /* float: left; */ 
 
    top: 34px; 
 
    left: 170px; 
 
}

<a href="malmo/"> 
 
    <img class="city1" src="images/city.png" alt="Malmö"> 
 
</a>

problème est quand j'utilise le position: absolute; et je remets à la côte mon navigateur, il modifie la position .

Vous pouvez dire maintenant c'est parce qu'il est une position absolue et il suit le navigateur lorsque vous redimensionnez et tel, mais comment puis-je résoudre ce donc il ne bouge pas?

Merci!

Answer 1

Point de position absolue doit être à l'intérieur d'un élément de bloc avec position:relative. Par exemple, vous pouvez essayer de mettre votre <a ..><img /></a> dans un <div> comme tel:

#cont { 
 
    position: relative; 
 
    width: 600px; 
 
    height: 600px; 
 
} 
 
#cont a { 
 
    position: absolute; 
 
    top: 34px; 
 
    left: 170px; 
 
}

<div id="cont"> 
 
    <a href="malmo/"> 
 
    <img class="city1" src="images/city.png" alt="Malmö"> 
 
    </a> 
 
</div>

Maintenant, il doit rester en position fixe même si vous redimensionnez votre navigateur.

Answer 2

Utilisez position: fixed. Mais sachez que fixed a des problèmes croisés de navigateur.