查询/ CSS :无法显示隐藏在首页后面的页脚

Question

我试图揭示一个底部的固定页脚(z-index: 1)隐藏在一个首页( z-index: 999，它应该包含一张图片)后面，在点击链接时运行一个脚本...

在现实生活中，使用触控板并用两个手指将图片传送到顶部时，这一功能运行良好。对于用户的触控板，我需要插入一个链接的按钮，以帮助显示页脚。

这是jsfiddle

    HTML -------
    <div class="container">
        <div class="front_page">
            <div class="text1">
                <p>Front-page .........</p>
            </div>
            <div class="text2">
               <a id="reveal" href="#">REVEAL FOOTER</a>
            </div>
        </div>
        <div class="footer" data-pages="reveal-footer">
           footer .........
         </div>
    </div>

    CSS --------
    .container { 
        width:100%; 
        position:relative; 
    }
    .front_page { 
        width:100%; 
        background: yellow; 
        position:absolute; 
        z-index:1000; 
    }
    .text1 {
        height: 200px;
    }
    .text2 {
        height: 400px;
        text-align: center;
        font-size: 32px;
    }

    .footer { 
        width:100%; 
        height:100px; 
        background: blue;
        color: white;
        position: fixed;
        bottom: 0;
        z-index: 1;
    }

   --SCRIPT 
    var myEl = document.getElementById('reveal');

    myEl.addEventListener('click', function() {
        var _elem = $('[data-pages="reveal-footer"]');
        setHeight();
            function setHeight(){
                var h = _elem.outerHeight();
                alert('_elem.outerHeight: ' + h);
                alert(JSON.stringify( _elem.prev()));
                _elem.prev().css({ 'margin-bottom':h })
            }
        $(window).resize(function(){
          setHeight();
        })  
        //alert('reveal the footer elemen _elem !' + _elem);
    }, false);

Answer 1

您只需要添加下面这一行：

$('.footer').css('z-index', 1001);

http://jsfiddle.net/tmzbsd0g/11