Question

我正在创建一个网站，但是当我尝试滚动时，页面保持固定。我可以看到滚动条上下移动，但是页面没有移动。我更改了屏幕的高度和宽度，但没有任何改变。页面实际滚动的唯一方式是，当我将页面上的不同部分从“固定”位置更改为相对位置时。但是，当我将其更改为“相对”时，整个屏幕会失真，并且所有内容都会移到不适当的位置。我的代码基本上由不同的部分组成，这些部分都位于固定位置（我确定位置是问题所在），而在这些部分中，我具有文本和图像（所有位置均固定）。我该如何解决？

<!DOCTYPE HTML>
<html>
<head>

        <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title> Home|Cloudberrie</title>
<style>
    #top{
background-color:#E7E5DF;
height:3rem;
width:100%;
position:fixed;
top:0;
left:0;
z-index: -1;


}
#logo{
background-color:white;
height:3.5rem;
width:100%;
position:fixed;
z-index:-1;
top:48px;
left:0;


}
#banner{
background-color:white;
height:7rem;
width:100%;
position:fixed;
z-index:-1;
top:100px;
left:0;



}


.button{

    border:none;
    background-color:#1f88ca;
padding: 20px 40px;
  font-size: 16px;
  cursor: pointer;
  display: inline-block;
  border-radius:18px;
  width:200px;
  position:fixed;
  top:400px;
  left:100px;
  color:white;
  letter-spacing: 3px;
 

}
button:hover{
background-color:red;
}
#choose{
background-color:white;
height:30rem;
width:100%;
position:fixed;
z-index:-1;
top:550px;
left:0;

}

html { 

height: 100%;
 width: 100%;
 overflow:auto;
padding-bottom:2000px; 
} 

</style>    
</head>
<body >
    <section id ="top">
<p style="position:fixed; right:1800px;bottom:880px;"><i class="fa fa-location-arrow" aria-hidden="true"></i>    Plano, Texas</p>
    <p style="position:fixed; right:1650px;bottom:880px;"><i class="fa fa-phone" aria-hidden="true"></i>   (123) 456 7890</p>
    <p style="position:fixed; right:1460px;bottom:880px;"><i class="fa fa-envelope" aria-hidden="true"></i>    support@gmail.com</p>
    </section> 
    <section id="logo">
<img src="berrylogo.png"height="25"width="25" style="position:fixed;left:10px;top:56px;">
<img src="cloudberie.png"height="30"width="150" style="position:fixed;left:40px;top:56px;">
<p style="position:fixed; right:350px;top:65px;"><a href="file:///C:/HTML/cloudberry.html">Home</a></p>
<p style="position:fixed; right:275px;top:65px;"><a href="file:///C:/HTML/cloudberry.html">About</a></p>
<p style="position:fixed; right:180px;top:65px;"><a href="file:///C:/HTML/cloudberry.html">Services</a></p>
<p style="position:fixed; right:110px;top:65px;"><a href="file:///C:/HTML/cloudberry.html">Client</a></p>

</section>
<section id ="banner">
<img src="banner-3.png"width="100%" height="450px">
<h1 style="font-family:sans-serif;color:#1f88ca;position:fixed; top:180px;left:100px;">MAIN TEXT</h1>
<p style="font-family:sans-serif;color:grey;position:fixed; top:250px;left:100px; font-size:40px;">Lorem ipsum dolor sit amet, consectetur </p><br><p style="font-family:sans-serif;color:grey;position:fixed; top:290px;left:100px; font-size:40px;">adipiscing elit, sed do eiusmod tempor.</p>
<button class="button">Learn More</button>

    </section>
<section id="choose">
<p style="font-size:2.5rem;color:#5e5e5e;position:fixed;top:630px;text-align:center;left:760px;"> <b>WHY CHOOSE US</b></p>
<div style="width:80px;height:3px;border:1px; background-color:#25ace4;position:fixed;top:700px;left:890px;"></div>

<img src="why-us-pic.jpg"width="300px;"style="position:fixed;top:800px;left:425px;">
<p style="font-size:1rem;position:fixed;top:800px;left:800px;">At consectetur lorem donec massa sapien faucibus et molestie ac. Molestie ac feugiat sed lectus vestibulum. Faucibus pulvinar elementum integer enim. Eu consequat ac felis donec et odio. Ac ut consequat semper viverra nam libero justo laoreet sit. Condimentum vitae sapien pellentesque habitant morbi.</p>



</section>
</body>
</html>

Answer 1

固定的元素不会在页面滚动中移动。这就是为什么制作它们的原因。因此，要解决此问题，请不要将position设置为fixed。这是MDN定义的position:fixed：

该元素从常规文档流中删除，并且在页面布局中没有为该元素创建空间。它相对于由视口建立的初始包含块定位，除非其祖先之一的transform，perspective或filter属性设置为除其他属性外（参见CSS Transforms Spec），在这种情况下，祖先的行为与包含块。（请注意，浏览器在透视图和过滤器方面存在不一致，从而导致了包含块的形成。）其最终位置由top，right，bottom和left的值确定。

以下是position:fixed的示例：

for(let i=0;i<100;i++){
 document.body.innerHTML+="<p>normal positioning</p>"
}

#fixed{
 position:fixed;
}

<!DOCTYPE html>
<html>
<body>
<p id="fixed">fixed text</p>
</body>
</html>

Answer 2

鉴于我所掌握的少量细节，我认为您正在寻找的是绝对的，而不是固定的。话虽如此，手动放置元素通常不是一种好习惯。如果这样不起作用，请尝试添加更多信息，例如代码片段和屏幕截图

固定位置会干扰现场滚动

2 个答案: