Question

我对网页设计很陌生，我打算制作一个简单的网页。我喜欢这个网页的想法：

顶部不会与页面的其余部分一起滚动，提供整洁的滚动效果，以及可滚动部分的顶部位于网页底部的位置（如同一个“单击鼠标滚轮，您将立即开始看到滚动部分。这样的事情是如何成为可能的？

Answer 1

只是给出位置：固定;和z-index：1到你想要回滚的顶部和包装器给出位置：relative;的z-index：2;

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
.fix-div{position:fixed; height:100%; width:100%; left:0; top:0; z-index:1;}
#wrapper{position:relative; z-index:2; margin:100% 0 0;}
</style>
</head>

<body>
    <div class="fix-div">
        Fix div content goes here...
    </div>
    <div id="wrapper">
        Your content goes here...
    </div>
</body>
</html>

Answer 2

小提琴： link

代码：

CSS：

.main{
    background-color:green;
    width:100%;
    height:100px;
    padding:0px;
    margin:0px;
    z-index:1;
    position:fixed;
    top:0px;
}

.content{
    height:1000px;
    width:100%;
    margin-top:100px;
    z-index:10;
    background-color:red;
    position:relative;
}

HTML：

<div class='main'></div>
<div class='content'></div>

Answer 3

对于您不想滚动的部分，将css设置为position：absolute;顶部：0;左：0;

如何使网页的一部分不与页面的其余部分一起滚动？

3 个答案: