Question

我是网页设计的初学者，我在制作滚动框时遇到问题。我试图让一个相对位置元素能够使用固定标题（导航栏）滚动，并且相关元素可以在下面或“消失”。一旦它向上滚动。

<html>
<style> 

.toplinks{
position:fixed;
list-style-type: none;
margin-top:70px;
margin-left:300px;
padding:0;
font-size: 18px;
overflow: hidden;
background-color: white;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

#paragraph{
font-size: 15px;
position:relative;
overflow:auto;
width:65%;
height:30%;
top:250px;
left:250px;
z-index:-3;
}
</style>

<body>
<div class="toplinks">
<ui> <li> link</li>
<li><link</li>
<li>link</li>
<li>link</li></div>

<div id="paragraph"> heres a block of text that will probably also
have a picture that I want to be able to be scrollable with 
the navigation bar up top fixed </div> 
</body>
</html>

Answer 1

@Jamie Theophilos

首先，您的代码存在许多问题，例如您尚未关闭 ul 标记，同时在＆lt; > li 标签

只需休息一下 CSS 和 Html 即可。您还可以使用自己的代码检查此网址是否正常工作： https://jsfiddle.net/itskamalkumar/zr9aLcz9/

<强> HTML

<div class="toplinks">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
<div id="paragraph"> heres a block of text that will probably also
have a picture that I want to be able to be scrollable with 
the navigation bar up top fixed heres a block of text that will probably also
have a picture that I want to be able to be scrollable with 
the navigation bar up top fixed heres a block of text that will probably also
have a picture that I want to be able to be scrollable with 
the navigation bar up top fixed heres a block of text that will probably also
have a picture that I want to be able to be scrollable with 
the navigation bar up top fixed heres a block of text that will probably also
have a picture that I want to be able to be scrollable with 
the navigation bar up top fixed also
have a picture that I want to be able to be scrollable with 
the navigation bar up top fixed heres a block of text that will probably also
have a picture that I want to be able to be scrollable with 
the navigation bar up top fixed also
have a picture that I want to be able to be scrollable with 
the navigation bar up top fixed heres a block of text that will probably also
have a picture that I want to be able to be scrollable with 
the navigation bar up top fixed also
have a picture that I want to be able to be scrollable with 
the navigation bar up top fixed heres a block of text that will probably also
have a picture that I want to be able to be scrollable with 
the navigation bar up top fixed</div>

<强> CSS

.toplinks{
position:fixed;
list-style-type: none;
margin-top:70px;
margin-left:150px;
padding:0;
font-size: 18px;
overflow: hidden;
background-color: white;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

#paragraph{
font-size: 15px;
position:relative;
overflow:auto;
width:65%;
height:30%;
top:250px;
left:150px;
z-index:-3;
}

滚动框不工作/使相对定位元素在滚动时在固定元素下消失

1 个答案: