溢出-y：滚动不起作用，文本超出 div

Question

这本来应该是网站的一个简单部分，但我运行遇到了一个问题，不幸的是 overflow-y:scroll 命令不起作用，歌词离开了 div.

#cover{
    position:fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,0.6);
    z-index:5;
    width:100%;
    height:100%;
    display:none;
}
#albumsongs{
 background-color:black;
 opacity:2;
    height:90%;
    width:70%;
    
    position:absolute;
 top:5%;
 left:10%;
    z-index:10;
    display:block;
 border:5px solid #cccccc;
 border-radius:10px;
}
#albumsongs:target, #albumsongs:target + #cover{
    display:block;
    opacity:2;
}
.cancel{
    display:block;
    position:absolute;
    top:3px;
    right:2px;
    background:rgb(245,245,245);
    color:black;
    height:30px;
    width:35px;
    font-size:30px;
    text-decoration:none;
    text-align:center;
    font-weight:bold;
}
#lyrics{
 overflow-y:scroll;
 height:100%;
 width:45%;
 border:1px solid red;
}

#playbutton{
 height:40px;
 width:100px;
 position:absolute;
 top:2%;
 left:5%;
 padding-right:300px;
 border-radius:200px;
 outline:none;
 border:none;
 background-color:#698aad;
}
#playimage{
 cursor:pointer;
 margin-top:-1px;
 margin-left:-7px;
 height:40px;
 width:40px;
}
#songtitle{
 
 color:#ffc31a;
 font-size:25px;
 position:absolute;
 top:15%;
 left:35.5%;
}


#starslyrics{
 font-size:22px;
 color:red;
 position:absolute;
 top:3%;
 right:40%;
 
}
#starslyrics:hover{
 border-radius:5px;
 border:none;
 cursor:pointer;
 background-color:red;
 color:white;
}
#showstarslyrics{
 display:block;
 position:absolute;
 left:12%;
 color:red;
}
#unleashedsonglist{
 overflow-y:scroll;
 height:100%;
 width:55%;
 border:1px solid blue;
 position:absolute;
 right:0;
 top:0;
}

<div id="albumsongs">
<div id="lyrics">
<p id="showstarslyrics">
You spoke a word and life began<br>
Told oceans where to start and where to end<br>
You set in motion time and space<br>
But still you come and you call to me by name<br>
Still you come and you call to me by name<br><br>

If you can hold the stars in place<br>
You can hold my heart the same<br>
Whenever I fall away<br>
Whenever I start to break<br>
So here I am, lifting up my heart<br>
To the one who holds the stars<br><br>

The deepest depths, the darkest nights<br>
Can't separate, can't keep me from your sight<br>
I get so lost, forget my way<br>
But still you love and you don't forget my name<br><br>

If you can hold the stars in place<br>
You can hold my heart the same<br>
Whenever I fall away<br>
Whenever I start to break<br>
So here I am, lifting up my heart<br>
If you can calm the raging sea<br>
You can calm the storm in me<br>
You're never too far away<br>
You never show up too late<br>
So here I am, lifting up my heart<br>
To the one who holds the stars<br><br>

Your love has called my name<br>
What do I have to fear?<br>
What do I have to fear?<br>
Your love has called my name<br><br>
What do I have to fear?<br>
What do I have to fear?<br>

If you can hold the stars in place<br>
You can hold my heart the same<br>
Whenever I fall away<br>
Whenever I start to break<br>
So here I am, lifting up my heart<br>
(Lifting up my heart)<br>
If you can calm the raging sea<br>
You can calm the storm in me<br>
You're never too far away<br>
You never show up too late<br>
So here I am, lifting up my heart<br>
To the one who holds the stars<br><br>

You're the one who holds the stars

</p>









</div>



<div id="unleashedsonglist">
<button id="playbutton"><img title="Play/pause music" id="playimage" onclick="play()"src="play3.png"/><span id="songtitle">Skillet-Stars</span></button>
<span onclick="showstarslyrics()" id="starslyrics">Lyrics</span>










</div>








    <a href="#" class="cancel">&times;</a>
</div>
<div id="cover" >
</div>

JSFiddle demo （如果您还需要其他代码，请在评论中告诉我）

在这里你也可以看到图片中的问题，文本超出了div，我不知道为什么。

我错过了什么？

Answer 1

在 #showstarslyrics 中你应该使用 position: relative，而不是 absolute:

#showstarslyrics{
    display:block;
    position:relative;
    left:12%;
    color:red;
}

已更新JSFiddle

Answer 2

不要使用绝对定位。绝对位置将 div 完全置于流之外。相反，使用相对：

#showstarslyrics {
display: block;
position: relative;
left: 12%;
color: red }

Answer 3

你需要删除位置绝对形式#showstarslyrics fiddle

#showstarslyrics{
    display:block;
    color:red;
}

Answer 4

将position: relative应用于#lyrics。这将解决您的问题。您溢出的内容绝对定位到主体而不是其父级。

溢出-y：滚动不起作用，文本超出 div

Overflow-y:scroll is not working, text goes out of div

html

css

overflow