title: How to make an image show over an element's padding region in CSS?
body: <p><a href="https://i.stack.imgur.com/FLRgr.jpg" rel="nofollow noreferrer">Current Situation Image</a></p>
  
  <p>Here is what I have got. But I want that rectangle facebook image behind the red region (currently it is just behind the text 'Please')</p>
  
  <pre><code>#mlnk{
    text-decoration:none;
    position:relative;
    top:40%;
    left:0%;
    color: #b5c5d6;
  }
  .container-corner-img{  /* **THIS IS TO BE PUSHED BACK** */
     height: 40%; width: 70%;
     position: absolute;
     top: 5px; left:-75px;
   }
   .container{
     width:50%;
     height:30%;       
     background: linear-gradient(#8B9DC1, #3b5998);
     padding:100px;
     border-radius:12px;
     position: relative;
     font-family: sans-serif;
   }
   h1{  /* **THIS NEEDS TO BE BROUGHT TO FRONT** */
     margin-left: auto;
     margin-right: auto;
     padding: 8px;
     border-radius: 4px;
     box-shadow: 0 4px 6px 0 rgba(0,0,0,0.2);
     transition: 0.4s ease;
     background-color: red;
     margin-top: 0;
   }     
   img{
     height: 80%;
     width: 50%;
   }     
   &lt;div class="container"&gt;
     &lt;div class="container-corner-img"&gt;
       &lt;img src="fbminimal.png"&gt;
     &lt;/div&gt;
     &lt;h1&gt;
      &lt;a id="mlnk" href = "#link"&gt; Please login to your facebook account      first&lt;/a&gt;
     &lt;/h1&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>I have commented the css definitions in CAPS that needs to be focused according to me.</p>