Html YouTube iframe显示在`position:sticky`CSS div上方_Html_Css_Youtube_Css Position

Html YouTube iframe显示在`position:sticky`CSS div上方

html css youtube

Html YouTube iframe显示在`position:sticky`CSS div上方,html,css,youtube,css-position,Html,Css,Youtube,Css Position,我使用一个导航条div，使用CSS技巧保持在屏幕顶部。以下是伪代码： CSS: 下面是HTML： <body> <div id="hdr_main_menu"> <nav> <div id="hdr_mm"> <span>menu items</span> </div> <div

我使用一个导航条

div

，使用CSS技巧保持在屏幕顶部。以下是伪代码：

CSS:

下面是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>

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

当我向上滚动这个YouTube

iframe

时，它会在我的顶部导航栏上滚动，并显示其

位置：sticky

样式

你知道如何让它在下面滚动吗？

z-index可以解决这个问题。试试这个：

.ytp {
    /* 
       your code
       ....
    */

    z-index: 1000;
    position: relative;
}

您需要在粘性分区上使用

z-index

。请在CSS下方使用

#hdr_main_menu{
   z-index: 99;
}

检查这里：

太棒了。非常感谢。

.ytp {
    /* 
       your code
       ....
    */

    z-index: 1000;
    position: relative;
}

#hdr_main_menu{
   z-index: 99;
}