Question

好吧......我有一个导航菜单，当你向下滚过它时，它会变成页面附带顶部的固定菜单。

但由于某种原因，我在页面上有一个div，它具有绝对位置和比菜单更低的z-index，但它仍然显示在菜单的顶部...

这是将菜单设置为固定超过某一点的功能。

$(function(){
    var pos = $('#nav').offset().top;
    $(window).scroll(function(){
        if( $(window).scrollTop() > pos ) {
            $('#nav').parent().parent().css({position: 'fixed', top: '0px', background: '#fff', width: '100%', 'z-index': 9002, left:0});
        } else {
            $('#nav').parent().parent().css({position: 'static', top: '0px', background: 'none', width: '100%', 'z-index': 1});
        }
    });
});

这是在不应该......时显示在顶部的div。

.header {
   position: relative;
   z-index: 1;
   margin: 0;
   padding: 0; }

另外，here您可以在向下滚动页面时看到它的一个示例。

Answer 1

在<div id="page-content">

职位：亲戚

将<header class="site-header">上的 z-index 更改为 2

具有绝对位置和较低z-index的Div显示在较高的z-index（固定位置）之上

1 个答案: