修复了水平视差响应网站中的标题

【问题标题】：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 属性，它对我有用。