Bootstrap (CSS) - Overlay One Img über andere mit Responsive Design

Question

Welche CSS muss ich verwenden, so dass ein img "im Bau" in der oberen linken Ecke des 1. Bildes überlagert wird. Der Abschnitt des Skripts, auf den es sich bezieht, ist die zweite Spalte in der Zeile. Ich habe verschiedene Lösungen mit Position in CSS ausprobiert, aber habe nichts gefunden, was mit der Seitengrößenanpassung konsistent ist. Ich brauche eine reaktionsfähige Lösung.

<div class="col-lg-6"> 
     <h2 class="text-center">Current Conditions</h2> 
     <img src="@Url.Content("~/Content/Img/weather4.png")" id="current-weather-logo" class="img-responsive center-block" /> 
     <p class="text-center">View the current weather conditions in relation to Crestwood Assets</p> 
     <p class="text-center"> 
      <a href="@Url.Action("CurrentWeather","Home")" class="btn btn-primary"> Launch <span class="glyphicon glyphicon-chevron-right"></span></a> 
      <a href="@Url.Action("CurrentConditionsDoc","Home")" class="btn btn-primary disabled"> Documentation <span class="glyphicon glyphicon-chevron-right"></span></a> 
     </p> 

    </div> 

    <div class="col-lg-6"> 
     <h2 class="text-center">Historical Weather</h2> 
      <img src="@Url.Content("~/Content/Img/weather4.png")" id="current-weather-logo" class="img-responsive center-block" /> 
      <img src="@Url.Content("~/Content/Img/under-construction.png")" id="under-construction" class="img-responsive center-block img-overlay" /> 
     <p class ="text-center">Leverage historical weather data for analysis with asset data.</p> 
      <p class ="text-center"> 
       <a href="@Url.Action("HistoricalWeather","Home")" class="btn btn-primary"> Launch <span class="glyphicon glyphicon-chevron-right"></span></a> 
       <a href="@Url.Action("HistoricalWeatherDoc", "Home")" class="btn btn-primary disabled"> Documentation <span class="glyphicon glyphicon-chevron-right"></span></a> 
      </p> 
    </div> 
</div> 

EDIT I modifiziert, um die Bilder in einem div aufzunehmen und einige zusätzliche CSS zur Verfügung gestellt.

<div id="img-container"> 
    <img src="@Url.Content("~/Content/Img/weather4.png")" id="current-weather-logo" class="img-responsive center-block" /> 
    <img src="@Url.Content("~/Content/Img/under-construction.png")" id="under-construction" class="img-responsive center-block img-overlay" /> 
</div> 




.img-overlay{ 
position:absolute; 
top:0; 
left:0; 
z-index:3;  
} 

#img-container{ 
position:relative; 
} 

EDIT 2

Ich versuchte, es zu passen die oberen und linken Attribute verwenden:

.img-overlay{ 
position:absolute; 
top:0; 
left:14.5%; 
z-index:3; 
} 

dies an meiner ursprünglichen Breite groß gearbeitet, aber wenn so bemessen, nach unten zu einem kleineren Fenster wird es hineingedrückt. Ich möchte konsistent sein.

Answer 1

Hier ist, wie ein Bild über ein anderes Bild setzen: http://codepen.io/ruchiccio/pen/ZWZEEy

Mehr als dass ich nicht helfen kann, weil Sie nicht normalen Pfade zu Bildern geliefert haben, so können wir nicht sehen, was auf was gehen soll. Vielleicht bieten Sie einen Screenshot von dem, was Sie möchten.

<div id="container"> 
<img id="pic1" src="http://placehold.it/350x150"> 
<img id="pic2" src="http://placehold.it/150x50"> 
</div> 

#container { 
    position: relative; 
} 

#pic2 { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 3; 
}