【问题标题】:Fixed header in an horizontal parralax responsive website修复了水平视差响应网站中的标题
【发布时间】:2016-05-16 19:15:03
【问题描述】:

这是一个例子。

http://www.poste-ton-look.com/OneMuze/index.html

在本示例中,我尝试将页眉保留为页脚显示。全宽,顶部位置固定。

问题是我让这个网站响应水平导航:如果我水平滚动,标题结束。如果我尝试在固定/绝对顶部位置显示标题,它将杀死它。

目标是保持标题响应调整,在全宽顶部中心位置。

感谢您的帮助,

对不起我的英语。

Seb.

【问题讨论】:

    标签: css responsive-design fixed parallax


    【解决方案1】:

    这就是我将如何继续让你瞄准:

    FIDDLE

    HTML:

    <header></header>
    <section>
        <span>bla</span>
        <span>bli</span>
        <span>blu</span>
        ...
    </section>
    <footer></footer>
    

    CSS:

    *{
        margin:0;
        padding:0;
    }
    
    html,body{
        height:100%;
        width:100%;
    }
    
    
    header,footer{
        position:fixed;
        left:0;
        width:100%;
        height:50px
    }
    header{
        top:0;
        background:red;
    }
    section{
        height:100%;
        width:4000px;
        background:green;
    
    }
    span{
        position:relative;
        top:100px;
        margin:100px;
    }
    footer{
        bottom:0;
        background:yellow;
    }
    

    【讨论】:

    • 谢谢。我已经管理了我的标题组件的 z-index 属性,它对我有用。
    猜你喜欢
    • 2013-06-18
    • 2018-12-11
    • 2015-02-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-11-06
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多