如何在CSS中使图像显示在元素的填充区域上？

Question

现状图片

这就是我所得到的。 但是我想要那个矩形的Facebook图像在红色区域的后面（当前它恰好在文字“ 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>

我对CAPS中的css定义进行了评论，据我所述，它需要重点关注。

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>