Question

我正在尝试为我的页面构建一个水平视差滚动。但是，我似乎无法将内容显示在页面的不同部分，它们只是出现在相同的部分，除了垂直分开。有什么想法吗？

HTML：

<div id="transition-slide-container">   
       <div id="transition-slide">
            <div class="slide" id="home">
                <h1>home</h1>
            </div>
            <div class="slide" id="portfolio">
                <h1>portfolio</h1>
            </div>
            <div class="slide" id="about">
                <p>about</p>
            </div>                  
            <div class="slide" id="contact">
                <p>contact<p>
            </div>
        </div>
</div>

CSS：

div#transition-slide-container {    
    background: #bee1ff;
    height: 100%;
    padding-top: 128px;
    padding-bottom: 200px;
    width: 400%;
    min-height: 600px;
    z-index: -1;
    overflow: auto;
} 
.slide {
    min-width: 100%;
} 
div#home {
    width: 960px;
    margin: 0 auto;
    height: 600px;
} 
div#portfolio{
    width: 960px;
    margin: 0 auto;
    height: 700px;
}
div#about{
    width: 960px;
    margin: 0 auto;
    height: 600px;
}
div#contact {   
    width: 960px;
    margin: 0 auto;
    height: 600px;
 }

网站：http://andrewgu12.kodingen.com/ 编辑：我意识到我并没有特别说明我的问题，我忘记添加的内容是我希望所有这些都是横向划分的，就像在这里看到的那样：http://markdalgleish.com/projects/stellar.js/

Answer 1

div.dx
 {
 width:1012px;
 padding:5px;
 border:1px solid gray;
 margin-left:273px;
 margin-top:15px;
 }
div.ex
 {
 width:1000px;
 padding:5px;
 border:1px solid gray;
 margin-left:273px;
 margin-top:5px;
 }

CSS格式的工作原理是，如果你已经为一个块指定了左边，那么为了放置下一个块，你应该指定大于0的边距。至于auto，它将从绝对位置开始边缘化。因此，所有内容都可能出现在一个区块中，并且会混乱。

Answer 2

如果您想将这些幻灯片堆叠到内容区域，您需要添加以下内容：

div#transition-slide-container {
    position: relative;
}

和

div#transition-slide-container .slide {
    position: absolute;
    top: 0;
    width: 960px;
    margin: 0 auto;
}

这将使幻灯片相对于其容器绝对定位，一个放在另一个上面。

由于幻灯片div都具有相同的尺寸，因此无需单独声明它们。可以删除div#home，div#portfolio等

现在您将内容添加到幻灯片中并按幻灯片定位/动画/显示/隐藏它，

如何使内容水平显示在页面的分离部分？

2 个答案: