Bootstrap (CSS) - Overlay One Img over another using responsive design
<p>What CSS do I need to use so that one img "under construction" is overlayed in the top left corner of the 1st image. The section of script this pertains to is the second column in the row. I've tried various solutions using position in css but have come up with nothing that is consistent with page resizing. I need a responsive solution. </p>

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

    &lt;/div&gt;

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

<p></p>

<p><strong>EDIT</strong>
I modified to include the images in a div and provided some additional CSS.</p>

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




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

#img-container{
position:relative;   
}
</code></pre>

<p><a href="https://i.stack.imgur.com/IOypE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IOypE.jpg" alt="enter image description here"></a></p>

<p><strong>EDIT 2</strong></p>

<p>I attempted to fit it using the top and left attributes: </p>

<pre><code>.img-overlay{
position:absolute;
top:0;
left:14.5%;
z-index:3;  
}
</code></pre>

<p>This worked great at my initial width but when sized down to a smaller window it is pushed in. I would like to be consistent. </p>

<p><a href="https://i.stack.imgur.com/80Gdt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/80Gdt.png" alt="enter image description here"></a></p>

<p><a href="https://i.stack.imgur.com/Exj3m.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Exj3m.jpg" alt="enter image description here"></a></p>