重叠:隐藏在div.

Question

我有一个有2个div的section。其中一个div是一个文本层，它的部分文本需要被隐藏。我想不出overflow: hidden不工作的原因。

基本上我只需要再加一点字，直到D可以看到。

.work-harder {
background-color: rgb(64, 68, 230);
height: auto;
}
.work-harder #background {
width: 1920px;
position: absolute;
padding: 30px 0 0 100px;
white-space: nowrap;
overflow: hidden;
font-size: 208px;
font-weight: bold;
color: rgba(26, 27, 86, 0.188);
text-transform: uppercase; 
}

.work-harder .content {
display: flex;
padding: 30px;
}
.work-harder .content p {
color: rgb(255, 255, 255);
font-size: 36px;
font-weight: bold;
line-height: 1.111;  
width: 60%;
padding: 130px 0 0 350px; 
margin: 0; 
}
.work-harder .content button {
color: rgb(41, 41, 53);
font-size: 18px;
font-weight: bolder;
text-align: center;
background-color:  rgb(255, 255, 255);
border: none;
padding: 20px 60px;  
cursor: pointer;
margin: 70px 0 0 350px;
}
.content img {
position: relative;
top: 70px;
}

<section class="work-harder">
<div id="background">Work harder</div>
<div class="content">
<div>
<p>Aenean bibendum lacus sed ex commodo, pretium rutrum turpis elementum.</p>
<button type="submit" class="check">
<span>Check it</span>
</button>
</div>
<div>
<img src="images/work-harder.png" alt="Macbook image">
</div>
</div>
</section>

Answer 1

.work-harder {
background-color: rgb(64, 68, 230);
height: auto;
overflow: hidden;
position: relative;
}

就可以了。overflow: hidden;需要在包含元素上指定，并且由于您正在定位背景absolute，因此父容器需要是相对的，以便成为绝对的"原点"。