Question

我的z-index有问题。我尝试将图片放在位于iframe的视频下。

img
{
    position:relative;
}

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

我搜索了答案，并且只获得了关于位置和堆叠背景的提示，这里没有问题（如果我认为正确的话）。我会感激一些帮助！

EDIT 使用此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>

Answer 1

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

position: absolute;

你提供的z-index似乎正在发挥作用。

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

Z-index不起作用（具有定位和堆叠上下文感知）

1 个答案: