Question

我想将div放在滚动标题后面，就像它对于页脚一样。

页脚是

#rt-footer-surround {
     color: #686868;
     background-color: #2E244E;
     height: 40px;
     width: 100%;
     z-index: 900;
     bottom: 0;
     left: 0;
     padding: 10px;
     position: fixed;
}

但是我不能为标题复制它。

有问题的网站在这里：

site with z-index issue

Answer 1

要使用z-index样式，您还必须在要设置样式的同一对象上使用position:fixed;，position:absolute;或position:relative;。

然后，您可以使用div来表示页眉，页脚和主要内容部分，如下所示：

<div class="head"></div>
<div class="mainbody"></div>
<div class="foot"></div>

或者，您可以使用<head>，<main>和<footer>标记代替div。就编码和视觉而言，没有区别。

此外，您不必在z-index上添加大量数字。只要一个元素的z-index大于另一个元素的z-index，该元素将始终在上面分层，无论是900比1还是2比1。

Answer 2

好的，这就是我想出来解决问题的方法。 jQuery的。

基本上我的问题是首先要求这个。

如果你在div中有内容，你可以在该div中放置一个导航栏作为位置：相对，即相对于该div。

你不能通过css做的是让div中的内容向上滚动并保持在你创建的导航栏下面。此外，当导航菜单区域滚动超出屏幕顶部时，它将消失。

所以我使用的jquery代码做了两件事。它允许您使用导航菜单栏，即宽度600px /高度50px，并将其放置在您喜欢的任何位置。此外，当它到达用户屏幕的顶部时，它将停止/停止并允许该菜单是可见的，而其他所有菜单都在该菜单区域下方滚动。

现在，我认为这不是Jquery的新功能，但是超级方便的是您可以在任何div位置定义菜单导航栏。顶部有一个常规菜单，另一个菜单可能位于滑块下方或页面下方的某些内容中。

我会分享代码，如果可以用SO ...我自己支付了。

哦，这是我用过的两个网站。

http://isaerudition.com/study-pages＆amp; This is for a client I am preparing his website...

// JavaScript Document
/*     jQuery(document).ready(function(){
        if(jQuery('header,div,p,span,h1,h2,h3,h4,a').hasClass('isa-scroll-fixed')){
            var el = jQuery('.isa-scroll-fixed'),
            elTop = jQuery(el).offset().top;
            elLeft = jQuery(el).offset().left;
            //alert(elTop); 
            jQuery(document).scroll(function(){
                var height = jQuery(window).height();
                var scrollTop = jQuery(window).scrollTop();
                if(scrollTop>=elTop){
                    //add fixed
                    jQuery(el).addClass('scroll_fixed').css("left",elLeft+"px");
                }else{
                    //clear fixed
                    jQuery(el).removeClass('scroll_fixed').attr('style','');
                }
            })
        }
    })
       */
       // JavaScript Document
    /* jQuery(window).load(function(){
        if(jQuery('header,div,p,span,h1,h2,h3,h4,a').hasClass('isa-scroll-fixed')){
            var el = jQuery('.isa-scroll-fixed'),
            elTop = jQuery(el).offset().top;
            elLeft = jQuery(el).offset().left;
            //alert(elTop); 
            var scrollTop = jQuery(window).scrollTop();
            scrollFixed(el,elTop,elLeft);
        }
    }) */
    var setInter = null;
    var session = null;

    setInter = setInterval(function(){
        if(jQuery('header,div,p,span,h1,h2,h3,h4,a').hasClass('isa-scroll-fixed')){
            var el = jQuery('.isa-scroll-fixed');
            session =  jQuery(el).attr('set-scroll');
            //alert(session);

            if(session == '2'){
                jQuery(el).attr('set-scroll','2');
            }else{
                jQuery(el).attr('set-scroll','1');
            }
            if(session == '1'){
                setValue(el);
            }
        }
    }, 200);
    function setValue(el){
        var setScroll = jQuery(el).attr('set-scroll');
        elTop = jQuery(el).offset().top;
        elLeft = jQuery(el).offset().left;
        //alert(elTop);
        jQuery(el).attr('set-scroll','2');
        scrollFixed(el,elTop,elLeft);
    };
    function scrollFixed(el,elTop,elLeft){
        jQuery(document).unbind('scroll').scroll(function(){
            //alert(elTop);
            var height = jQuery(window).height();
            var scrollTop = jQuery(window).scrollTop();
            if(scrollTop>=elTop){
                //add fixed
                jQuery(el).addClass('scroll_fixed').css("left",elLeft+"px");
            }else{
                //clear fixed
                jQuery(el).removeClass('scroll_fixed').attr('style','');
            }
        })
    }

如何在滚动的固定导航标题后面对文本/ div进行z-index？

2 个答案: