停止图像重叠屏幕，导致滚动条

Question

停止图像重叠屏幕，导致滚动条。 在

它应该是这样的，

https://jsfiddle.net/Luudbo02/1/

<section class="sec1">
Hello
</section>
<section class="sec2">
  <div class="sec2-1">
    Image
 </div>

.sec1{
background: #ccc;
padding:20px;  
z-index: 9999999;
border: 1px solid black;
}
.sec2{
position: relative;
height: 200px;
padding: 10px;
border: 1px solid black;
}
.sec2-1{
transform: scale(1.2);
background: red;
position: relative;
border: 1px solid black;
text-align: center;
}

Answer 1

将属性overflow: hidden添加到.sec2。

Answer 2

只需删除transform: scale(1.2);类

中的.sec2-1即可

.sec2-1{
 background: red;
 position: relative;
 border: 1px solid black;
 text-align: center;
}

或在overflow:hidden课程上添加.sec2。

像这样：

.sec2{
   overflow:hidden;
   position: relative;
   height: 200px;
   padding: 10px;
   border: 1px solid black;
 }