Positionnement dynamique des éléments Absolument sur l'arrière-plan

Question

J'ai trois éléments que je veux conserver au même endroit lorsque l'image rétrécit de façon sensible.

.main 
 
{ 
 
\t position: relative; 
 
} 
 

 
.container 
 
{ 
 
\t display: inline; 
 
} 
 

 
.point 
 
{ 
 
\t display: inline; 
 
    position: absolute; 
 
\t max-width: 15%; 
 
\t margin-right: 10px; 
 
\t padding: 3px 7px 3px 5px; 
 
\t font-size: 12px; 
 
\t font-weight: bold; 
 
\t color: #fff; 
 
\t background: #ff0000; 
 
\t border-radius(5px); 
 
\t box-shadow(1px 2px 5px rgba(0,0,0,0.5)); 
 
} 
 

 
.one 
 
{ 
 
\t top: 40%; 
 
\t left: 10%; 
 
} 
 

 
.two 
 
{ 
 
\t top: 50%; 
 
\t left: 40%; 
 
} 
 

 
.three 
 
{ 
 
\t top: 75%; 
 
\t left: 20%; 
 
}

<div class="main"> 
 
    <div class="container"> 
 
    <div class="point one">1</div> 
 
    <div class="point two">2</div> 
 
    <div class="point three">3</div> 
 
    </div> 
 
    <img src="https://i.ytimg.com/vi/M5SHKCxKDgs/hqdefault.jpg" alt="Husky"> 
 
</div>

Answer 1

Je crois que vous le voulez aussi à l'échelle que les échelles image vers le bas réactive, de sorte que cette mesure permet cet effet.

.wrapper { 
 
     position: relative; 
 
     display: inline-block; 
 
    } 
 
    
 
    .wrapper img { max-width: 100%; } 
 
    
 
    .point 
 
    { 
 
     position: absolute; 
 
    \t max-width: 15%; 
 
    \t margin-right: 10px; 
 
    \t padding: 3px 7px 3px 5px; 
 
    \t font-size: 12px; 
 
    \t font-weight: bold; 
 
    \t color: #fff; 
 
    \t background: #ff0000; 
 
    \t border-radius(5px); 
 
    \t box-shadow(1px 2px 5px rgba(0,0,0,0.5)); 
 
    } 
 
    
 
    .one 
 
    { 
 
    \t top: 40%; 
 
    \t left: 10%; 
 
    } 
 
    
 
    .two 
 
    { 
 
    \t top: 50%; 
 
    \t left: 40%; 
 
    } 
 
    
 
    .three 
 
    { 
 
    \t top: 75%; 
 
    \t left: 20%; 
 
    }

<div class="main"> 
 
    <span class="wrapper"> 
 
    <img src="https://i.ytimg.com/vi/M5SHKCxKDgs/hqdefault.jpg" alt="Husky"> 
 
    <span class="point one">1</span> 
 
    <span class="point two">2</span> 
 
    <span class="point three">3</span> 
 
    </span> 
 
</div>

J'utilise inline-block pour autoriser automatiquement l'élément wrapper à « envelopper » autour de l'image peu importe la taille de l'image est. J'ai également mis max-width: 100% pour transformer l'image en une image réactive (bien, il réduit juste quand la fenêtre redimensionne). Comme les points sont tous basés sur%, ils restent dans la bonne position lorsque l'image est réduite.

✔ Aucune exigence d'avoir une largeur de l'image fixe et hauteur/emballage, il est donc sensible
✔ Moins HTML requis
✔ Fonctionne sur à peu près tous les navigateurs en plus les anciens non pris en charge

C'est une belle astuce que je J'ai l'habitude de faire des choses comme des "bannières" à travers des images et d'autres techniques pour positionner les choses sur des images pour obtenir des effets.

Answer 2

Faites votre récipient en position relative et définir une hauteur et la largeur sur elle depuis l'enfant de votre conteneur est absolu. Faites également votre image positop absolue et top 0. Voir l'extrait.

.container 
 
{ 
 
    width: 480px; 
 
    height: 360px; 
 
    position: relative; 
 
    z-index: 100; 
 
\t position: relative; 
 
} 
 
.main img{ 
 
position:absolute; 
 
top:0;} 
 

 
.point 
 
{ 
 
\t display: inline; 
 
    position: absolute; 
 
\t max-width: 15%; 
 
\t margin-right: 10px; 
 
\t padding: 3px 7px 3px 5px; 
 
\t font-size: 12px; 
 
\t font-weight: bold; 
 
\t color: #fff; 
 
\t background: #ff0000; 
 
\t border-radius(5px); 
 
\t box-shadow(1px 2px 5px rgba(0,0,0,0.5)); 
 
} 
 

 
.one 
 
{ 
 
\t top: 40%; 
 
\t left: 10%; 
 
} 
 

 
.two 
 
{ 
 
\t top: 50%; 
 
\t left: 40%; 
 
} 
 

 
.three 
 
{ 
 
\t top: 75%; 
 
\t left: 20%; 
 
}

<div class="main"> 
 
    <div class="container"> 
 
    <div class="point one">1</div> 
 
    <div class="point two">2</div> 
 
    <div class="point three">3</div> 
 
    </div> 
 
    <img src="https://i.ytimg.com/vi/M5SHKCxKDgs/hqdefault.jpg" alt="Husky"> 
 
</div>

Answer 3

Définissez la largeur et la hauteur de votre tag img.

.main 
 
{ 
 
\t position: relative; 
 
} 
 

 
.container 
 
{ 
 
\t display: inline; 
 
} 
 

 
.point 
 
{ 
 
\t display: inline; 
 
    position: absolute; 
 
\t max-width: 15%; 
 
\t margin-right: 10px; 
 
\t padding: 3px 7px 3px 5px; 
 
\t font-size: 12px; 
 
\t font-weight: bold; 
 
\t color: #fff; 
 
\t background: #ff0000; 
 
\t border-radius(5px); 
 
\t box-shadow(1px 2px 5px rgba(0,0,0,0.5)); 
 
} 
 

 
.one 
 
{ 
 
\t top: 40%; 
 
\t left: 10%; 
 
} 
 

 
.two 
 
{ 
 
\t top: 50%; 
 
\t left: 40%; 
 
} 
 

 
.three 
 
{ 
 
\t top: 75%; 
 
\t left: 20%; 
 
} 
 
img{ 
 
    width:100%; 
 
    height:100%; 
 
}

<div class="main"> 
 
    <div class="container"> 
 
    <div class="point one">1</div> 
 
    <div class="point two">2</div> 
 
    <div class="point three">3</div> 
 
    </div> 
 
    <img src="https://i.ytimg.com/vi/M5SHKCxKDgs/hqdefault.jpg" alt="Husky"> 
 
</div>