Как сделать так, чтобы изображение отображалось поверх области заполнения элемента в CSS?

Question

Изображение текущей ситуации

Вот что у меня есть. Но я хочу, чтобы это прямоугольное изображение в Facebook за красной областью (в настоящее время оно находится за текстом "Пожалуйста").

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

Я прокомментировал определения css в CAPS, которые должны быть сфокусированы согласно мне.

Answer 1

Чтобы вывести заголовок вперед, вы должны установить z-index на большее значение. Чтобы иметь возможность использовать z-index на элементе он должен иметь другую позицию, чем static, Так что используйте relative, Кроме того, не используйте center -тег, так как он устарел. Макет должен контролироваться только CSS.

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