How to make an image show over an element's padding region in CSS?

Question

Current Situation Image

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')

#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%;
 }     
 <div class="container">
   <div class="container-corner-img">
     <img src="fbminimal.png">
   </div>
   <h1>
    <a id="mlnk" href = "#link"> Please login to your facebook account      first</a>
   </h1>
 </div>

I have commented the css definitions in CAPS that needs to be focused according to me.

Answer 1

To bring the heading to the front, you have to set z-index to a larger value. To be able to use z-index on an element it needs to have a different position than static . So use relative . Moreover, do not use the center -tag since it is deprecated. The layout should be controlled by CSS only.

 #mlnk { text-decoration: none; position: relative; top: 40%; left: 0%; color: #b5c5d6; } h3 { color: midnightblue; padding: 4px; box-shadow: 0 2px 4px 0 #38434e; background: #3c64ad; } .container-corner-img { /* **THIS IS TO BE PUSHED BACK** */ height: 40%; width: 70%; position: absolute; top: 5px; left: -75px; /* opacity: 0.4; */ } .container { width: 50%; height: 30%; background: linear-gradient(#8B9DC1, #3b5998); padding: 100px; border-radius: 12px; position: relative; font-family: sans-serif; /* z-index: 1; */ margin: 0 auto; } 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; /* rgba(0,0,80,0.2); */ margin-top: 0; /* Add this */ position: relative; z-index: 1000; } h1:hover { box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 0 6px 8px 0 rgba(0, 0, 0, 0.19); transition: 0.4s ease; } img { height: 80%; width: 50%; /* z-index: 0; */ } .center { text-align: center; margin: 0 auto; } 

 <div class="center"> <div class="container"> <div class="container-corner-img"> <img src="https://stocknews.com/wp-content/uploads/2017/07/facebook-fb-alternate.jpg"> </div> <h1> <a id="mlnk" href="#link"> Please login to your facebook account first</a> </h1> <h3>You need to Log In</h3> </div> </div>