个人中心
gpt4 book ai didi

html - 使用 zindex 在主体下方隐藏页脚

转载 作者：太空宇宙 更新时间：2023-11-04 12:35:40 24 4
gpt4 key购买 nike

我试图在主体后面隐藏一个页脚，当主体滚动到页脚上方时，该页脚会显示出来。我遇到的问题是，当我将页脚 z-index 设置为负数时，它隐藏了页脚 nicveley 但链接不可点击

所以我尝试提高主要内容的 z-index 并将页脚 z-index 设置为零，但随后页脚在主要内容上方可见

这里是一些代码

#main {
    z-index:4;
    padding:0px 0px 450px;
    border-bottom:1px solid red;
}
#mainBg {
    background:red;
}
footer {
    padding: 50px 0;
    bottom:0;
    position:fixed;
    z-index:0;
    width:100%;
}
<body>
    <div id="main">
        <div id="mainBg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere, justo eget auctor sagittis, sapien odio rutrum quam, eu feugiat sem lacus lacinia quam. Morbi malesuada porta sapien eu ornare. Pellentesque vel nibh auctor lectus malesuada porttitor. Cras et dui quam. Nunc sollicitudin mi condimentum iaculis rhoncus. Sed tristique mollis sagittis. Fusce bibendum congue augue, nec scelerisque velit egestas viverra. Phasellus a rhoncus leo. In tempor sagittis rhoncus. Ut a risus viverra, ornare lacus non, ornare nisi. Curabitur luctus mauris orci, quis condimentum lacus facilisis a. Nullam cursus, nisl id sagittis feugiat, risus ipsum consequat felis, id luctus erat felis eget velit. Pellentesque vehicula risus at nibh faucibus, in venenatis tellus aliquam. Pellentesque dolor libero, vehicula et magna efficitur, sollicitudin pharetra ipsum. Curabitur tempus et sapien eu facilisis. Phasellus ipsum diam, pellentesque sed felis non, euismod malesuada orci. Nulla rutrum eros in dignissim pretium. Donec et orci leo. Nullam quis luctus massa. Donec rhoncus lacinia cursus. Fusce sed imperdiet ligula. Maecenas fermentum sed velit eget aliquam. Nullam vel ipsum erat. Mauris ultricies feugiat metus, sed scelerisque arcu imperdiet eget. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum porta felis at pharetra maximus. Curabitur efficitur turpis non interdum finibus. Mauris ut consectetur nisl, eget condimentum sem. Integer rutrum, augue vitae faucibus rutrum, metus tellus volutpat quam, in fermentum arcu risus quis libero. Curabitur faucibus pulvinar tempus. Aenean eu ex ullamcorper, ullamcorper enim a, convallis elit. Cras id facilisis turpis. Nunc urna libero, rhoncus eget blandit id, sollicitudin vitae nibh. Nunc sed nibh faucibus, consequat nibh quis, commodo neque. Nullam porttitor est a dui bibendum, non scelerisque nulla imperdiet. Mauris ut suscipit magna. Aenean magna orci, aliquam nec fringilla ut, blandit ac augue. Aliquam aliquet, metus ut congue varius, massa erat dapibus lectus, sit amet blandit libero tortor eget nibh. Nam tincidunt tristique elementum. Vivamus sagittis nec tellus ut sollicitudin. Vivamus nec lobortis nisl. Proin placerat, orci sed interdum efficitur, libero enim tempor nisl, quis iaculis nisl ligula non dolor. Mauris in felis at justo varius posuere. Nam ac lorem ex. Aliquam convallis ac metus ac condimentum. Aliquam ac ex a lacus placerat rutrum sed a eros. Nunc et tellus at enim rutrum volutpat. Praesent egestas ligula at diam convallis, eget posuere diam vulputate. Cras tempus non nibh eu hendrerit. Aenean erat odio, posuere mattis neque nec, gravida tristique velit. Aenean condimentum massa sed dictum viverra. Sed bibendum velit ac felis rhoncus volutpat feugiat ut tellus. Praesent mollis malesuada sapien vel feugiat. Vivamus scelerisque, lacus nec blandit sodales, nibh velit volutpat augue, quis vehicula urna justo ac felis. Aliquam erat volutpat. Sed non purus eget erat vulputate varius ac vel urna. Phasellus ac tempor mauris. Morbi ut ligula tristique, fringilla metus quis, pharetra mauris. Nunc non fringilla dui, non varius sem. Quisque ullamcorper, est vitae rhoncus porttitor, sapien urna semper orci, non aliquam lacus ipsum non sem. Phasellus volutpat nibh nulla, eu auctor lacus suscipit eget.</div>
    </div>
    <footer>footer footer
        <br/>
        <br/>footer footer
        <br/>
        <a href="http://google.co.uk">Google link</a>
        <br/>footer footer
        <br/>
        <br/>footer footer
        <br/>
        <br/>
    </footer>
</body>

我已经添加了几个指向 js fiddles 的链接来展示它的实际效果

JSFIDDLE - negative z-index

JSFIDDLE - positive zindex

最佳答案

将position:relative 添加到main，然后将padding 添加到body 底部或height .您仍在导致此问题的 main 下(如评论中所述)。

填充底部解决方案:

#main {
    z-index:4;
    padding:0px 0px 450px;
    border-bottom:1px solid red;
    position: relative;
}

#mainBg {
    background:red;
    
}

footer {
    padding: 50px 0;
    bottom:0;
    position:fixed;
    z-index:3;
    width:100%;
}

body {
  padding-bottom:200px;
}
<body>
    <div id="main">
        <div id="mainBg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere, justo eget auctor sagittis, sapien odio rutrum quam, eu feugiat sem lacus lacinia quam. Morbi malesuada porta sapien eu ornare. Pellentesque vel nibh auctor lectus malesuada porttitor. Cras et dui quam. Nunc sollicitudin mi condimentum iaculis rhoncus. Sed tristique mollis sagittis. Fusce bibendum congue augue, nec scelerisque velit egestas viverra. Phasellus a rhoncus leo. In tempor sagittis rhoncus. Ut a risus viverra, ornare lacus non, ornare nisi. Curabitur luctus mauris orci, quis condimentum lacus facilisis a. Nullam cursus, nisl id sagittis feugiat, risus ipsum consequat felis, id luctus erat felis eget velit. Pellentesque vehicula risus at nibh faucibus, in venenatis tellus aliquam. Pellentesque dolor libero, vehicula et magna efficitur, sollicitudin pharetra ipsum. Curabitur tempus et sapien eu facilisis. Phasellus ipsum diam, pellentesque sed felis non, euismod malesuada orci. Nulla rutrum eros in dignissim pretium. Donec et orci leo. Nullam quis luctus massa. Donec rhoncus lacinia cursus. Fusce sed imperdiet ligula. Maecenas fermentum sed velit eget aliquam. Nullam vel ipsum erat. Mauris ultricies feugiat metus, sed scelerisque arcu imperdiet eget. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum porta felis at pharetra maximus. Curabitur efficitur turpis non interdum finibus. Mauris ut consectetur nisl, eget condimentum sem. Integer rutrum, augue vitae faucibus rutrum, metus tellus volutpat quam, in fermentum arcu risus quis libero. Curabitur faucibus pulvinar tempus. Aenean eu ex ullamcorper, ullamcorper enim a, convallis elit. Cras id facilisis turpis. Nunc urna libero, rhoncus eget blandit id, sollicitudin vitae nibh. Nunc sed nibh faucibus, consequat nibh quis, commodo neque. Nullam porttitor est a dui bibendum, non scelerisque nulla imperdiet. Mauris ut suscipit magna. Aenean magna orci, aliquam nec fringilla ut, blandit ac augue. Aliquam aliquet, metus ut congue varius, massa erat dapibus lectus, sit amet blandit libero tortor eget nibh. Nam tincidunt tristique elementum. Vivamus sagittis nec tellus ut sollicitudin. Vivamus nec lobortis nisl. Proin placerat, orci sed interdum efficitur, libero enim tempor nisl, quis iaculis nisl ligula non dolor. Mauris in felis at justo varius posuere. Nam ac lorem ex. Aliquam convallis ac metus ac condimentum. Aliquam ac ex a lacus placerat rutrum sed a eros. Nunc et tellus at enim rutrum volutpat. Praesent egestas ligula at diam convallis, eget posuere diam vulputate. Cras tempus non nibh eu hendrerit. Aenean erat odio, posuere mattis neque nec, gravida tristique velit. Aenean condimentum massa sed dictum viverra. Sed bibendum velit ac felis rhoncus volutpat feugiat ut tellus. Praesent mollis malesuada sapien vel feugiat. Vivamus scelerisque, lacus nec blandit sodales, nibh velit volutpat augue, quis vehicula urna justo ac felis. Aliquam erat volutpat. Sed non purus eget erat vulputate varius ac vel urna. Phasellus ac tempor mauris. Morbi ut ligula tristique, fringilla metus quis, pharetra mauris. Nunc non fringilla dui, non varius sem. Quisque ullamcorper, est vitae rhoncus porttitor, sapien urna semper orci, non aliquam lacus ipsum non sem. Phasellus volutpat nibh nulla, eu auctor lacus suscipit eget.</div>
    </div>
    <footer>footer footer
        <br/>
        <br/>footer footer
        <br/>
        <a href="http://google.co.uk">Google link</a>
        <br/>footer footer
        <br/>
        <br/>footer footer
        <br/>
        <br/>
    </footer>
</body>

高度解决方案:

#main {
    z-index:4;
    padding:0px 0px 450px;
    border-bottom:1px solid red;
    position: relative;
}

#mainBg {
    background:red;
    
}

footer {
    padding: 50px 0;
    bottom:0;
    position:fixed;
    z-index:3;
    width:100%;
}

body {
  height:1500px;
}
<body>
    <div id="main">
        <div id="mainBg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere, justo eget auctor sagittis, sapien odio rutrum quam, eu feugiat sem lacus lacinia quam. Morbi malesuada porta sapien eu ornare. Pellentesque vel nibh auctor lectus malesuada porttitor. Cras et dui quam. Nunc sollicitudin mi condimentum iaculis rhoncus. Sed tristique mollis sagittis. Fusce bibendum congue augue, nec scelerisque velit egestas viverra. Phasellus a rhoncus leo. In tempor sagittis rhoncus. Ut a risus viverra, ornare lacus non, ornare nisi. Curabitur luctus mauris orci, quis condimentum lacus facilisis a. Nullam cursus, nisl id sagittis feugiat, risus ipsum consequat felis, id luctus erat felis eget velit. Pellentesque vehicula risus at nibh faucibus, in venenatis tellus aliquam. Pellentesque dolor libero, vehicula et magna efficitur, sollicitudin pharetra ipsum. Curabitur tempus et sapien eu facilisis. Phasellus ipsum diam, pellentesque sed felis non, euismod malesuada orci. Nulla rutrum eros in dignissim pretium. Donec et orci leo. Nullam quis luctus massa. Donec rhoncus lacinia cursus. Fusce sed imperdiet ligula. Maecenas fermentum sed velit eget aliquam. Nullam vel ipsum erat. Mauris ultricies feugiat metus, sed scelerisque arcu imperdiet eget. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum porta felis at pharetra maximus. Curabitur efficitur turpis non interdum finibus. Mauris ut consectetur nisl, eget condimentum sem. Integer rutrum, augue vitae faucibus rutrum, metus tellus volutpat quam, in fermentum arcu risus quis libero. Curabitur faucibus pulvinar tempus. Aenean eu ex ullamcorper, ullamcorper enim a, convallis elit. Cras id facilisis turpis. Nunc urna libero, rhoncus eget blandit id, sollicitudin vitae nibh. Nunc sed nibh faucibus, consequat nibh quis, commodo neque. Nullam porttitor est a dui bibendum, non scelerisque nulla imperdiet. Mauris ut suscipit magna. Aenean magna orci, aliquam nec fringilla ut, blandit ac augue. Aliquam aliquet, metus ut congue varius, massa erat dapibus lectus, sit amet blandit libero tortor eget nibh. Nam tincidunt tristique elementum. Vivamus sagittis nec tellus ut sollicitudin. Vivamus nec lobortis nisl. Proin placerat, orci sed interdum efficitur, libero enim tempor nisl, quis iaculis nisl ligula non dolor. Mauris in felis at justo varius posuere. Nam ac lorem ex. Aliquam convallis ac metus ac condimentum. Aliquam ac ex a lacus placerat rutrum sed a eros. Nunc et tellus at enim rutrum volutpat. Praesent egestas ligula at diam convallis, eget posuere diam vulputate. Cras tempus non nibh eu hendrerit. Aenean erat odio, posuere mattis neque nec, gravida tristique velit. Aenean condimentum massa sed dictum viverra. Sed bibendum velit ac felis rhoncus volutpat feugiat ut tellus. Praesent mollis malesuada sapien vel feugiat. Vivamus scelerisque, lacus nec blandit sodales, nibh velit volutpat augue, quis vehicula urna justo ac felis. Aliquam erat volutpat. Sed non purus eget erat vulputate varius ac vel urna. Phasellus ac tempor mauris. Morbi ut ligula tristique, fringilla metus quis, pharetra mauris. Nunc non fringilla dui, non varius sem. Quisque ullamcorper, est vitae rhoncus porttitor, sapien urna semper orci, non aliquam lacus ipsum non sem. Phasellus volutpat nibh nulla, eu auctor lacus suscipit eget.</div>
    </div>
    <footer>footer footer
        <br/>
        <br/>footer footer
        <br/>
        <a href="http://google.co.uk">Google link</a>
        <br/>footer footer
        <br/>
        <br/>footer footer
        <br/>
        <br/>
    </footer>
</body>

关于html - 使用 zindex 在主体下方隐藏页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27297697/

24 4 0
文章推荐： html - 如何使固定位置的子 div 包裹在具有固定宽度的父 div 内
文章推荐： javascript - 行内高度被添加到 div
文章推荐： html - 构建响应式导航菜单
文章推荐： c++ - 为什么模板只能在头文件中实现？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com