直到几天前，使用position:absolute;并bottom:-36px足以将控件隐藏在页面下方，并且每当鼠标悬停在播放器上方时，它们就会弹出。现在，我可以向下滚动以查看它们。如何在保持相同向上滑动效果的同时解决此问题？
另外，还有一件事...我将控件div的line-height:36px高度设置为36px，但实际上为38px（bottom:-36px由于可见2px，因此没有用）。计时器和P，M和F div在顶部获得两个额外的px，而搜索栏在底部获得它们。这些多余的px来自哪里？
我们将非常感谢您提供有关如何解决这些问题以及了解所发生情况的任何帮助。谢谢你。
编辑1：
感谢Fahad，我设法解决了我的第一个问题。该代码段在codepen之外无法正常工作，但我将其修复后添加position:relative;到了父div中。我仍然不清楚为什么还要line-height添加这些额外的px。
给父母div一个相对位置会引发另一个问题，不要问我为什么，但是有时我需要在“玩家”中滚动（嗯，你可以问），而当我这样做时，控件就不会停留在最底端。请自行查看：
编辑2：
显然，可以通过在控件div中替换position:absolute;为来轻松解决position:fixed;。我仍在测试，以防万一这个小小的变化与其他任何东西混淆。
您可以将overflow-y: hidden;您的body使用CSS（以禁用垂直滚动）标签和更改bottom值-38px。
html,
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #EEE;
margin: 0;
overflow-y: hidden;
}
#player {
background-color: #333;
text-align: center;
height: 100vh;
}
#toggle {
margin: auto;
width: 500px;
font-size: 24px;
line-height: 60px;
background-color: #B83B3B;
}
#toggle:hover + #controls {
bottom: 0;
}
#controls {
position: absolute;
left: 0;
right: 0;
bottom: -38px;
line-height: 36px;
background-color: #B83B3B;
transition: bottom 0.3s ease;
}
#left {
float: left;
}
#right {
float: right;
}
#curTime {
font-size: 13px;
font-weight: bold;
margin: 0px 8px;
display: inline-block;
vertical-align: middle;
}
#center {
overflow: hidden;
}
#seekBar {
-webkit-appearance: none;
outline: none;
background-color: #1F7783;
height: 6px;
margin: 0;
width: 100%;
}
#seekBar::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #EEE;
height: 12px;
width: 12px;
border-radius: 12px;
cursor: pointer;
opacity: 0.8;
}
.button {
margin: 0px 8px;
font-size: 24px;
display: inline-block;
vertical-align: middle;
}<div id="player">
<div id="toggle">Hover to show controls.</div>
<div id="controls">
<div id="left">
<div class="button">P</div>
<span id="curTime">0:01</span>
</div>
<div id="right">
<div class="button">M</div>
<div class="button">F</div>
</div>
<div id="center">
<input type="range" id="seekBar" step="any">
</div>
</div>
</div>这是CodePen上的示例。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句