html - 如何阻止固定对象超出其父容器？

我目前正在为学校制作一个网站，在该网站上我有一个带有链接的边栏。我希望它在侧面的任何地方都可见，所以我使用了 position: fixed。但现在它不再保留在其父级的空间内，而是从页面的最顶部开始。

h1 {
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 250%;
  color: #000000;
  position: relative;
  z-index: 10;
}

h2 {
  text-align: left;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 180%;
  color: #591500;
  position: relative;
  z-index: 10;
}

body {
  background-size: 600% 100%;
  height: 100%;
  width: 1200px;
  position: relative;
  z-index: 3;
}

article {
  width: 900px;
  float: left;
}

nav {
  background-color: black;
  width: 1200px;
  height: 110px;
  position: relative;
  z-index: 10;
}

aside {
  width: 300px;
  float: left;
  text-align: center;
  overflow-y: hidden;
  height: 3000px;
  position: relative;
  z-index: 4;
}

footer {
  width: 1200px;
  float: left;
  height: 25px;
  color: white;
}

header.intro {
  font-size: 100%;
  color: black;
  position: relative;
  z-index: 10;
}

header#intro {
  background-image: url("../images/banner4.jpg");
  background-size: cover;
  font-size: 350%;
  color: white;
  width: 1200px;
  height: 300px;
  position: relative;
  z-index: 10;
}

header#intro h1 {
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 225%;
  color: black;
  position: relative;
  z-index: 10;
}

li {
  display: inline-block;
}

li a {
  display: inline-block;
  background-color: #FFDA45;
  border: black solid 1px;
  color: white;
  text-decoration: none;
  padding: 20px;
  width: 235px;
  margin-top: 15px;
  margin-bottom: 15px;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 200%;
}

li a:hover {
  border: red solid 5px;
  background-color: #E8B53F;
}

div#wrapper {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.middle {
  text-align: center;
  float: left;
  border-style: solid;
  border-width: 10px;
  border-color: #000033;
  width: 110px;
  padding: 1em;
  margin-left: 2em;
  margin-right: auto;
  position: fixed;
  top: 0px;
  overflow-y: hidden;
  position: fixed;
  z-index: 2;
  margin-top: 2em;
}

.btn {
  display: block;
  width: 90px;
  height: 90px;
  background: #f1f1f1;
  margin: 10px;
  border-radius: 30%;
  box-shadow: 0 5px 15px -5px #00000070;
  color: #3498db;
  overflow: hidden;
  position: relative;
}

.btn i {
  line-height: 90px;
  font-size: 26px;
  transition: 0.2s linear;
}

.btn:hover i {
  transform: scale(1.3);
  color: #f1f1f1;
}

.btn::before {
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  background: #3498db;
  transform: rotate(45deg);
  left: -110%;
  top: 90%;
}

.btn:hover::before {
  animation: aaa 1s 1;
  top: -10%;
  left: -10%;
}

@keyframes aaa {
  0% {
    left: -110%;
    top: 90%;
  }
  50% {
    left: 10%;
    top: -30%;
  }
  100% {
    top: -10%;
    left: -10%;
  }
}


/* dit stijlblad is gemaakt in 2019 */

<link href="styles/eersteStijl.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">


<body>
  <header id="intro">
    <h1>The Last of Us information page</h1>
  </header>

  <nav>

    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="TLOU part II.html">TLOU part II</a></li>
      <li><a href="Video's.html">Video's</a></li>
      <li><a href="Music.html">Music</a></li>
    </ul>

  </nav>

  <article>

    article

  </article>

  <aside>

    <section class="middle">
      <a class="btn" href="https://nl-nl.facebook.com/TLOUPS/" target="_blank">
        <i class="fab fa-facebook-f"></i>
      </a>
      <a class="btn" href="https://twitter.com/naughty_dog" target="_blank">
        <i class="fab fa-twitter"></i>
      </a>
      <a class="btn" href="https://en.wikipedia.org/wiki/The_Last_of_Us" target="_blank">
        <i class="fab fa-wikipedia-w"></i>
      </a>
      <a class="btn" href="https://www.instagram.com/_the.last.of.us/" target="_blank">
        <i class="fab fa-instagram"></i>
      </a>
      <a class="btn" href="https://www.youtube.com/watch?v=OQpdSVF_k_w" target="_blank">
        <i class="fab fa-youtube"></i>
      </a>
    </section>

  </aside>

  <footer>copyright</footer>

可以看出，侧边栏越过页面顶部，有没有办法让它不这样做并粘在里面？我希望侧边栏完全相同，除非它位于顶部然后我希望它被隐藏。我在 overflow hidden 的情况下尝试了它，但它似乎不起作用。

除非我处于全屏模式，否则我似乎也看不到边栏，这不是问题，但如果有人检查了代码，我可能会很高兴。

最佳答案

我知道你只是在学习，但为了我的理智，我将显式大小规则更改为 flex，并删除了一些其他规则，只是为了可读性，但不应该影响固定对象的最终目标；如果你愿意，你仍然可以使用你的方式。

一个解决方案是使用 sticky 值作为 position属性(property)。您将不得不对较小的屏幕进行一些响应式调整，但我没有包括它，因为我不确定您要做什么。

Sticky: The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.

h1 {
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 250%;
  color: #000000;
}

h2 {
  text-align: left;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 180%;
  color: #591500;
}

body {
  height: 100%;
}

article {
  background-color: red;
  flex: 1 1 100%;
}

nav {
  background-color: black;
}

main {
  display: flex;
  flex: 1;
}

footer {
  height: 25px;
  color: white;
  background-color: black;
}

header.intro {
  font-size: 100%;
  color: black;
}

header#intro {
  background-image: url("../images/banner4.jpg");
  background-size: cover;
  font-size: 350%;
  color: white;
}

header#intro h1 {
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 225%;
  color: black;
}

ul {
  margin: 0;
}

li {
  display: inline;
}

li a {
  background-color: #FFDA45;
  border: black solid 1px;
  color: white;
  text-decoration: none;
  margin-top: 15px;
  margin-bottom: 15px;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
}

li a:hover {
  border: red solid 5px;
  background-color: #E8B53F;
}

.middle {
  height: 500px;
  top: 0;
  position: sticky;
}

.btn {
  display: block;
  width: 90px;
  height: 90px;
  background: #f1f1f1;
  margin: 10px;
  border-radius: 30%;
  box-shadow: 0 5px 15px -5px #00000070;
  color: #3498db;
  overflow: hidden;
  position: relative;
}

.btn i {
  line-height: 90px;
  font-size: 26px;
  transition: 0.2s linear;
}

.btn:hover i {
  transform: scale(1.3);
  color: #f1f1f1;
}

.btn::before {
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  background: #3498db;
  transform: rotate(45deg);
  left: -110%;
  top: 90%;
}

.btn:hover::before {
  animation: aaa 1s 1;
  top: -10%;
  left: -10%;
}

@keyframes aaa {
  0% {
    left: -110%;
    top: 90%;
  }
  50% {
    left: 10%;
    top: -30%;
  }
  100% {
    top: -10%;
    left: -10%;
  }
}

<link href="styles/eersteStijl.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">

<header id="intro">
  <h1>The Last of Us information page</h1>

  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="TLOU part II.html">TLOU part II</a></li>
      <li><a href="Video's.html">Video's</a></li>
      <li><a href="Music.html">Music</a></li>
    </ul>
  </nav>

</header>

<main>
  <article>
    article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long
    text
    <br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long
    long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with
    long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article
    with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br>    article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long
    text
    <br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long
    long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with
    long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article
    with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br>    article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long
    text
    <br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long
    long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with
    long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article
    with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br>    article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long
    text
    <br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long
    long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with
    long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article
    with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br>    article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long
    text
    <br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long
    long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with
    long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article with long long text<br> article
    with long long text<br> article with long long text<br>
  </article>
  <aside class="middle">
    <a class="btn" href="https://nl-nl.facebook.com/TLOUPS/" target="_blank">
      <i class="fab fa-facebook-f"></i>
    </a>
    <a class="btn" href="https://twitter.com/naughty_dog" target="_blank">
      <i class="fab fa-twitter"></i>
    </a>
    <a class="btn" href="https://en.wikipedia.org/wiki/The_Last_of_Us" target="_blank">
      <i class="fab fa-wikipedia-w"></i>
    </a>
    <a class="btn" href="https://www.instagram.com/_the.last.of.us/" target="_blank">
      <i class="fab fa-instagram"></i>
    </a>
    <a class="btn" href="https://www.youtube.com/watch?v=OQpdSVF_k_w" target="_blank">
      <i class="fab fa-youtube"></i>
    </a>
  </aside>

</main>

<footer>copyright</footer>

关于html - 如何阻止固定对象超出其父容器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59129896/

html - 如何阻止固定对象超出其父容器？

上一篇：php - 对象方法不返回结果

下一篇：html - 使页脚粘在页面底部的干净方法？