html - YouTube iframe 显示在 `position:sticky` CSS div 上
问题描述
我正在使用导航栏使用CSS 技巧div
保持在屏幕顶部。position: sticky;
这是伪代码:
CSS:
#hdr_main_menu{
margin: .1em 0 2em 0;
padding: 0.9em 0.1em 0.6em 0.1em;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: #ffff00;
}
#hdr_mm{
float: right;
margin-right: 1em;
margin-left: 1em;
text-align: center;
}
#clr{
clear: both;
}
#main_content{
margin: 2em 1em 0 1em;
}
这是HTML:
<body>
<div id="hdr_main_menu">
<nav>
<div id="hdr_mm">
<span>menu items</span>
</div>
<div id="clr"></div>
</nav>
</div>
<div id="main_content">
<main> page content </main>
</div>
</body>
这很好用,除非我iframe
在主要内容中嵌入了 YouTube:
这是CSS:
#yt0{
max-width: 1024px;
}
.ytp{
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 1em;
height: 0;
}
它是 HTML:
<div id="yt0">
<div class="ytp">
<iframe title="Title" class="ytp" src="https://www.youtube.com/embed/QjHNHonuCQU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
当我向上滚动此 YouTubeiframe
时,它会以其position: sticky
样式滚动到我的顶部导航栏上。
知道如何让它在它下面滚动吗?
解决方案
您需要z-index
在粘性 div 上使用。使用下面的 CSS
#hdr_main_menu{
z-index: 99;
}