Question

html

<div class="overlay">

</div>
<div class="fixed">
    <center>

        <h3>
            Only this thing should be brought on top of overlay.. 
        </h3>
    </center>

</div>

<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br>

CSS：

.fixed{
    position: fixed;
    width: 100%;
    height: 60px;
    top:0;
    left: 0;
    background: #f4f4f4;   
}
.fixed h3{
    position:relative;
    z-index: 300;
    color: #fff;
}

.overlay{
    background-color: #000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: .5;
    position: fixed;
    z-index: 1;
    -webkit-transition: all 0.3s ease-out;
       -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
         -o-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;
}

现在我如何将h3放在叠加顶部的.fixed div中。请将一些读数与z-index一起发布。

http://jsfiddle.net/CvMLw/4/ 检查上面的jsfiddle，那么如何将h3置于叠加层之上..

Answer 1

您在叠加层下的固定z-index内的元素上设置了div。

换句话说，隐藏z-index值的叠加层是301。

你看，它就像乐高积木。 .fixed位于底部，其z-index为0。

然后在.fixed h3，div就是一个又一个300块。

例如，如果我们在h3标记下方添加另一个z-index，其中h3为150，那么“街区之塔”将低于h3所以div将位于顶部。

然后另一个.overlay（.fixed）在与z-index相同的DOM级别上，.fixed高于h3。该块将放置在<==============================> <- the .overlay (z-index 1) <=> <=> <=> <=> <=> <=> <- Elements inside .fixed (random z-index) <=> <=> <=> <=> <=> <=> <=> <=> <==============================> <- the .fixed (z-index 0)的300个块上。

例如：

.fixed

要将h3设置在顶部，请将其放在叠加层的同一个lvl上，或设置更高的z-index {{1}}。

Answer 2

如果.fixed元素充当其任何子女的持有者，则无法执行此操作。

这意味着，例如，如果您将h3的绝对位置设置为底部，则会将设置为其父元素的底部。

z-index的工作方式相同。它的值将由父级继承。由于z-index默认值为0，因此.fixed元素的z-index值为0，而您的h3首先包含 0然后300。

Answer 3

更改您的

        $('body').on('mouseover', '.subnav a', function(e) {
            // alert('mouseover event');
            if (window.innerWidth > 723) { //DISCOVERED - this was apparently being used to prevent hover behavior on tablet sized screens, reason unknown. Have now set to mobile breakpoint, consider removing. -TML
                //$(this).click(); //deprecated

                //store tab for delayed display
                Clover.navigation.pendingTab = $(this);
                //clear old timeout
                clearTimeout(Clover.navigation.delayedHoverTimer);
                Clover.navigation.delayedHoverTimer = null;

                //set new timeout. no need to pass var since var now belongs to scope
                Clover.navigation.delayedHoverTimer = setTimeout(function(e) {
                    //alert('delayed trigger fired');
                     try {
                        if (Clover.navigation.pendingTab.attr('class') && Clover.navigation.pendingTab.attr('class').indexOf('prime2') > -1) {
                             return false;
                        } else {
                            Clover.navigation.pendingTab.click();
                                 }

                    } catch (e) {
                       console.log('delayedHover Error: ', e);
                     //Find error on this line
                    }
                }, 100);

            }
        });
        $('body').on('mouseout', '.subnav a', function(e) {
            //clear timeout. clear tab var.
            clearTimeout(Clover.navigation.delayedHoverTimer);
            Clover.navigation.delayedHoverTimer = null;
            Clover.navigation.pendingTab = null;
        });

到

position:fixed;

在position:absolute;上，然后就可以了。

z-index和position固定如何在css中协同工作

3 个答案: