Responsive Positionierung von Elementen absolut über dem Hintergrund

Question

Ich habe drei Elemente, die ich am selben Ort aufbewahren möchte, an dem das Bild ansprechend schrumpft.

.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

Ich glaube, Sie wollen es auch als das Bild skaliert in Reaktion darauf nach unten skalieren, so dass dies wird erreicht, dass Wirkung.

.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>

ich inline-block bin mit automatisch erlauben dem wrapper Element egal um das Bild zu „verpacken“, welche Größe das Bild. Ich setze auch max-width: 100%, um das Bild in ein reagierendes Bild zu verwandeln (gut, es verkleinert sich gerade, wenn das Fenster die Größe ändert). Da die Punkte alle% -basiert sind, bleiben sie in der richtigen Position, wenn das Bild verkleinert wird.

✔ keine Anforderung eine feste Breite zu haben und Höhenbild/Wrapper, so ist es als Reaktion
✔ Weniger HTML erforderlich
✔ Funktioniert auf so ziemlich jedem Browser neben nicht unterstützten alten

Das ist ein schöner Trick, den ich bin es gewohnt, Dinge wie "Banner" über Bilder und andere Techniken zu machen, um Dinge über Bilder für Effekte zu positionieren.

Answer 2

Machen Sie Ihre Behälter als Position relativ und stellen eine Höhe und Breite auf sie, da das Kind Ihres Container absolut ist. Machen Sie auch Ihre Bild absolute Positop und Top 0. Siehe Snippet.

.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

Legen Sie Breite und Höhe für Ihr img-Tag fest.

.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>