html - 溢出-y:滚动不起作用,文本超出 div
问题描述
这应该是该站点的一个简单部分,但我遇到了该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">×</a>
</div>
<div id="cover" >
</div>
JSFiddle 演示 (如果您还需要其他代码,请在评论中告诉我)
在这里您还可以看到图片中的问题,文本消失了,div
我不知道为什么。
我错过了什么?
解决方案
不要使用绝对定位。绝对位置g 将 div 完全置于流之外。相反,使用相对:
#showstarslyrics {
display: block;
position: relative;
left: 12%;
color: red }
推荐阅读
- mongodb - NumberInt 是否在 MongoDB 中签名?
- eclipse - 为什么 Eclipse 中的文件夹是灰色的?
- java - 如何在启动时运行方法并根据 cron 表达式进行调度并避免并行执行
- python - Tensorflow 语音识别,运行 sess.run 失败,“无法将字符串转换为浮点数”
- c++ - Qt项目中的TCHAR设置
- java - 元素“名称”已与 @org.simpleframework.xml.Element 一起使用
- sql - SQL Server:案例语句不按条件执行
- python - 在数据子集上运行但在原始数据上完美运行时出现 h2o 错误
- apache - 我应该在哪里设置 apache 中的 ErrorLogFormat?
- c# - 如何根据特定条件从另一个表中获取列?