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

Question

所以，这应该是网站的一个简单部分，但我遇到了overflow-y:scroll命令不能正常工作的问题，歌词离开了div。

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

在这里你还可以看到图片中的问题，文本已经超出了div，我无法找出原因。

有人可以帮帮我吗？我错过了什么？谢谢你的帮助！

Answer 1

不要使用绝对定位。绝对位置完全取得流量之外的div。相反，使用relative：

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

Answer 2

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

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

更新了How to run a single test in nightwatch

Answer 3

您需要移除位置绝对形式#showstarslyrics fiddle

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

Answer 4

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