z索引和图像定位问题

问题描述

My-Image我想将一半图像隐藏在网页功能部分的后面。Output-Image

<div class="row">
     <div class="col-lg-6">
      <h1 class="title-heading">Meet new and interesting dogs nearby.</h1>
      <button type="button" class="btn btn-dark btn btn-primary btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
      <button type="button" class="btn btn-danger btn-lg btn btn-outline-light download-button"><i class="fab fa-google-play"></i>Download</button>
     </div>
      <div class="col-lg-6">
        <img class="img-1" src="images/iphone6.png" alt="iphone-mockup">
      </div>
    </div>
   </div>
 

 <section id="features">
    <div class="container-fluid">
     <div class="row">
      <div class="col-lg-4">
        <i class="fa fa-check-circle fa-4x" aria-hidden="true"></i>
        <h3 class="heading-features">Easy to use.</h3>
        <p class="para-features">So easy to use,even your dog Could do it.</p>
      </div> 
      <div class="col-lg-4">
        <i class="fa fa-bullseye fa-4x" aria-hidden="true"></i>
        <h3 class="heading-features">Elite Clientele.</h3>
        <p class="para-features">We have all the dogs,the greatest dogs.</p>
      </div> 
      <div class="col-lg-4">
        <i class="fa fa-heart fa-4x" aria-hidden="true"></i>
        <h3 class="heading-features">Guaranteed to work.</h3>
        <p class="para-features">Find the love of your dog's life or your money back.</p>
      </div> 
     </div>
    </div>  
  </section>

以及与之配套的CSS代码：

.img-1{
    width: 60%;
    transform:rotate(25deg); 
    position: absolute;

#features{
    padding: 7% 15%;
    text-align: center;
    background-color: #fff;
    position: relative;
    z-index: 1;

但是，使用代码后，图像部分被隐藏了，但不是我想要的方式。它隐藏了图像的大部分，但是我只希望底部的一部分被隐藏。

需要将图像定位为仅底部不可见。

解决方法

原来，我需要为图像部分提供适当的填充，并且它可以正常工作。

尽管如此，谢谢大家！

body{margin: 0;}
.section {
background: red;
display: block;
height: 300px;
position: relative;
overflow: hidden;
}

.section img {
width: 50%;
position: absolute;
bottom: -180px;
right: 100px;
transform: rotate(35deg);
}

<div class="section">

<img src="https://i.ibb.co/GRfQXS3/1559123552-1482834.png">

</div>

这是您的问题的解决方案。遵循CSS结构。

html z-index