我无法让特定的 div 停止滚动页面（我希望它留在一个地方）答案

【问题标题】：I cannot get a specific div to stop scrolling with the page (I want it to stay in one place)我无法让特定的 div 停止滚动页面（我希望它留在一个地方）
【发布时间】：2019-07-02 21:25:08
【问题描述】：

尽管位置固定且没有变换属性，但我的“英雄”div 始终随页面移动。我希望它保持原样

.hero{
  position: fixed;
  width: 1500px;
  margin-left: 0px;

  margin-top: 60px;
}

完整的css：

*
{
  margin: 0;
  padding: 0;
}

header
{
  background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)),  url(img/snow.jpg);
  height: 100vh;
  background-size: cover;
  background-position: center;

}

.main-nav
{
  float: right;
  list-style: none;
  margin-top: 30px;


}

.main-nav li{
  display: inline-block;
}

.main-nav li a{
  color:white;
  text-decoration: none;
  padding: 5px 20px;
  font-family: "Roboto", "sans-serif";

}

.main-nav li.active a{
  border: 1px solid white;
}

.main-nav li a:hover{
  border: 1px solid white;
}

.logo img
{
  width: 150px;
  height: auto;
  float: left;
}

body
{
  font-family: monospace;
}

.row
{
  max-width: 1200px;
  margin: auto;
}

.hero{
  position: fixed;
  width: 1500px;
  margin-left: 0px;

  margin-top: 60px;
}

h1{
  color: white;
  text-transform: uppercase;
  font-size: 60px;
  text-align: center;
  /* margin-top: 275px; */

  margin-top: 220;
}

.button
{
  margin-top: 30px;
  margin-left: 440px;

  position: sticky;
}

.btn{
  border: 1px solid white;
  padding: 10px 30px;
  color: white;
  text-decoration: none;
  margin-right: 5px;
  font-size: 13px;
  text-transform: uppercase;
  position: sticky;
}

.btn-one{
  background-color: darkorange;
  font-family: "Roboto", sans-serif;
  position: sticky;
}
.btn-two{
  font-family: "Roboto", sans-serif;
  position: sticky;
}

.btn-two:hover{
background-color: darkorange;
transition: all 0.5s ease-in;
}

html,body{
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-y: auto;
  overflow-x: hidden;

}

#page_2{

  height: 1000px;
  background-color: red;

  }

完整的 HTML：

<html>

<head>
<title>Summer Website</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>


  <header>

    <div id="page_1">

<div id="particles-js">


  <div  class="row">
    <!-- <div class ="logo">
      <img src="https://i.imgur.com/0PyA8HR.png" alt="">
      </div> -->

    <ul class="main-nav">
      <li class ="active"> <a href="index.html">HOME</a> </li>

              <li> <a href="about.html">ABOUT</a> </li>
                <li> <a href="">PORTFOLIO</a> </li>
      </ul>
      </div>



        <div class="hero">

        <h1>HI I'M KACIE AND I LOVE SOLVING PROBLEMS.</h1>

        <div class="button">
          <a href="https://www.linkedin.com/in/kacie-ahmed-2a8b5b171/" class="btn btn-one"  target="_blank"> LINKEDIN </a>
          <a href="" class="btn btn-two"> RESUME </a>
</div>

<div class ="bro">

</div>

        </div>


</div>

  </header>



      <!--particles js file -->

<!-- <h1> TEST </h1> -->
<script type="text/javascript" src="js/particles.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</div>

<div id=page_2>

</div>

</body>




</html>

【问题讨论】：

标签： html css position fixed

【解决方案1】：

您的结束标签嵌套不正确似乎有问题。在结束标头标记之前需要另一个结束 div。 sn-p 显示英雄处于固定位置：

.hero {
  position: fixed;
  width: 1500px;
  margin-left: 0px;
  margin-top: 60px;
}

Full css: * {
  margin: 0;
  padding: 0;
}

header {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(img/snow.jpg);
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.main-nav {
  float: right;
  list-style: none;
  margin-top: 30px;
}

.main-nav li {
  display: inline-block;
}

.main-nav li a {
  color: white;
  text-decoration: none;
  padding: 5px 20px;
  font-family: "Roboto", "sans-serif";
}

.main-nav li.active a {
  border: 1px solid white;
}

.main-nav li a:hover {
  border: 1px solid white;
}

.logo img {
  width: 150px;
  height: auto;
  float: left;
}

body {
  font-family: monospace;
}

.row {
  max-width: 1200px;
  margin: auto;
}

.hero {
  position: fixed;
  width: 1500px;
  margin-left: 0px;
  margin-top: 60px;
}

h1 {
  color: white;
  text-transform: uppercase;
  font-size: 60px;
  text-align: center;
  /* margin-top: 275px; */
  margin-top: 220;
}

.button {
  margin-top: 30px;
  margin-left: 440px;
  position: sticky;
}

.btn {
  border: 1px solid white;
  padding: 10px 30px;
  color: white;
  text-decoration: none;
  margin-right: 5px;
  font-size: 13px;
  text-transform: uppercase;
  position: sticky;
}

.btn-one {
  background-color: darkorange;
  font-family: "Roboto", sans-serif;
  position: sticky;
}

.btn-two {
  font-family: "Roboto", sans-serif;
  position: sticky;
}

.btn-two:hover {
  background-color: darkorange;
  transition: all 0.5s ease-in;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-y: auto;
  overflow-x: hidden;
}

#page_2 {
  height: 1000px;
  background-color: red;
}

<header>

  <div id="page_1">

    <div id="particles-js">


      <div class="row">
        <!-- <div class ="logo">
      <img src="https://i.imgur.com/0PyA8HR.png" alt="">
      </div> -->

        <ul class="main-nav">
          <li class="active"> <a href="index.html">HOME</a> </li>
          <li> <a href="about.html">ABOUT</a> </li>
          <li> <a href="">PORTFOLIO</a> </li>
        </ul>
      </div>



      <div class="hero">

        <h1>HI I'M KACIE AND I LOVE SOLVING PROBLEMS.</h1>

        <div class="button">
          <a href="https://www.linkedin.com/in/kacie-ahmed-2a8b5b171/" class="btn btn-one" target="_blank"> LINKEDIN </a>
          <a href="" class="btn btn-two"> RESUME </a>
        </div>

        <div class="bro">

        </div>

      </div>


    </div>

  </div>

</header>



<div id=page_2>

</div>

【讨论】：

【解决方案2】：

使用位置：继承

您使用的是固定的，我认为这是导致您的问题的原因。

继承不会移动，绝对堆栈，固定滚动页面，静态是默认的。

【讨论】：

我不能投票给你（少于 15 个代表？）。这解决了这个问题，但它让我把整个网页搞砸了
.hero 是否嵌套在您的标题元素中？如果是这样，我会尝试在css中为您的标题元素添加一个固定位置。 z-index 还会将标题推到其他所有内容的顶部，因此当它滚动时，它将位于内容的前面。我不知道您是否需要使用 z-index，但是如果您对层次结构有任何问题，那么值得考虑使用该值。