Z-index 不起作用（具有定位和堆叠上下文意识）答案

【问题标题】：Z-index does not work (with positioning and stacking context aware)Z-index 不起作用（具有定位和堆叠上下文意识）
【发布时间】：2017-09-26 15:20:53
【问题描述】：

我对 z-index 有疑问。我尝试使图像位于 iframe 中的视频下。

img
{
    position:relative;
}

iframe
{
    position:relative;
    z-index: 2;
}

我搜索了答案，只得到了关于位置和堆叠上下文的提示，这在这里没有问题（当然，如果我认为正确的话）。我会很感激一些帮助！

编辑带有此 img 和 iframe 的 html 的一部分

<div id="main-menu" class="navbar navbar-default navbar-fixed-top" role="navigation">   
    <img src="images/logo/logo_biale_margins320.png" id="logo"/>    
    </div>

    <section id="page-top" class="section-style" data-background-image="images/background/page-top.jpg">
        <div class="pattern height-resize">
            <div class="container" >
                    <center><h2 class="section-name">
                        <span>
                            SHOVROOM<br/>available today!
                        </span>
                    </h2></center>
                    <h3><center>
                        Present Anything, Anywhere 
                    </center></h3>
                <br/><br/>
                <header>

                    <center>
                                        <iframe id="video"
                        src="https://www.youtube.com/embed/psraUPSYU28?rel=0" frameborder="0" allowfullscreen>
                    </iframe>
                    </center>
                </header>

【问题讨论】：

你能添加你的html吗？
完成，我添加了它@zgood
你的 html 有点乱，你正在使用像中心这样过时的标签
我还在学习 @TemaniAfif 感谢您的反馈
@TemaniAfif — 不真实。 z-index 适用于任何定位的元素

标签： html image css iframe z-index

【解决方案1】：

下次，只包含与此问题相关的代码。为了让它们重叠，我做了以下操作。

position: absolute;

您提供的 z-index 似乎有效。

https://jsfiddle.net/JaredBledsoe/4v50bdwv/

【讨论】：