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

2024-01-10

我目前正在为学校制作一个网站，在该网站上我有一个带有链接的侧边栏。我希望它在侧面的任何地方都可见，所以我使用了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>

可以看出，侧边栏超出了页面顶部，有没有办法让它不这样做并粘在页面内？我希望侧边栏完全相同，除非它位于顶部，然后我希望将其隐藏。我尝试了隐藏溢出，但似乎不起作用。

我似乎也看不到侧边栏，除非我处于全屏状态，这不是问题，但可能很高兴知道是否有人检查了代码。

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

解决此问题的一种方法是使用sticky的值position https://developer.mozilla.org/en-US/docs/Web/CSS/position财产。您必须针对较小的屏幕进行一些响应式调整，但我没有包括它，因为我不确定您想要什么。

Sticky：元素按照文档的正常流程定位，然后相对于其最近的滚动祖先和包含块（最近的块级祖先）进行偏移，包括表格相关的元素，基于top、right、底部和左侧。偏移量不会影响任何其他元素的位置。

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>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

如何阻止固定对象超出其父容器？的相关文章

固定宽度可变高度网格CSS

我们如何在网格布局中实现固定宽度和可变高度就像www pinterest com http www pinterest com主页布局我认为他们正在使用 Javascript 只是想知道是否还有其他方法只需使用float left不管
增加数字输入、CSS、HTML 上的向下和向上箭头的大小

有没有办法利用CSS来增大数字输入框右侧的上下箭头的大小只是向上和向下箭头而不是整个输入框或者至少是按比例的看这个例子 size 36 font size 36px size 12 font size 12px
使用deployJava.runApplet来定位特定元素

经过多年成功维护一个使用旧有的小程序嵌入Java小程序的方法我们无法捂住耳朵唱啦啦啦不再了是时候使用 deployJava runApplet 当我使用点击处理程序触发此方法时此处通过 jQuery 在按钮上使用事件侦听器但这
如何隐藏 URL 中的锚标记

如何隐藏地址栏中以下链接 href 的哈希值 a href index php dev name 所以它会将我重定向到index php dev name 但我希望地址栏只显示index php 您可以使用 Javascript oncli
使用 CSS 自定义字体？

我见过一些在其网站上使用自定义字体的新网站除了常规的 Arial Tahoma 等他们支持大量的浏览器如何做到这一点同时如果可能的话还会阻止人们免费下载该字体一般来说您可以使用自定义字体 font face在你的 CSS 中
CSS设置默认滚动位置

有没有办法将滚动位置设置为默认值我知道如何在 javascript 中做到这一点例如使用 jquery div divWithScroll attr scrollTop 200 但我只想用CSS来做我不知道是否可行不 CSS 中没有
div 边框上的内边距

我想在 css 边框上添加填充将其拉入 div 内远离边缘使用 css 可以吗 css3 很好 webkit 这是设计我通过将一个 div 放在一个 div 中然后给内部 div 一个边框来做到这一点我想让标记尽可能精简所以如
在 HTML5 中创建可拖动和可缩放的网格

与其他 HTML5 不同如何创建网格问题我想知道如何制作一个可拖动且可扩展的绘制网格非常简单 var c document getElementById canvas var ctx c getContext 2d var width
如何倾斜 div 并保持背景图像不倾斜

我已经花了几个小时了所以希望有人能提供帮助我有一个网站其中大部分 div 都是倾斜的大多数 div 都包含背景图像现在我已经让 div 倾斜了内容完美地位于其中唯一的问题是背景图像它与父级一起倾斜我用谷歌搜索了很多但找不
如何将udp发送到udp node.js服务器？

我对此很陌生所以我真的不知道我在做什么但我已经设置了一个 node js udp 服务器我想从客户端来自网站向它发送一个数据包但我不知道如何在 javascript 中做到这一点或者是否可能我不是在研究如何从 Node js
如何在HTML中的PHP中注释掉HTML和PHP？

这是我想注释掉的一行代码 h1 class post title a href title a h1 一种流行的注释方法是分别注释 html 和 php 有一个更好的方法吗
网站 YouTube 嵌入视频不断播放

我正在使用 youtube 提供的 iframe 在我的网站上嵌入视频我还使用了一个 css 弹出窗口这是我从这个页面学到的http www pat burt com web development how to do a css po
在网页上的文本框中键入内容时删除所有空格

我如何在用户打字时即时删除输入到文本框中的空格 function var txt myTextbox var func function txt val txt val replace s g txt keyup func blur fun
防止浮动换行，直到元素达到最小宽度

我有可变宽度的 HTML 布局内容左侧有一个固定宽度的菜单 div 可变宽度由 css max width 和 min width 设置对于非常窄的浏览器窗口我希望内容包裹在菜单下方我目前通过设置来实现这一点float left在
按百分比设置 bootstrap 模态身高

我正在尝试制作一个带有主体的模态当内容变得太大时该主体会滚动但是我希望模式能够响应屏幕尺寸当我将最大高度设置为 40 时它没有任何效果但是如果我将最大高度设置为 400px 它会按预期工作但不会响应我确信我只是错过了一些
iOS7 中“-webkit-overflow-scrolling: touch” 最初的屏幕外元素被破坏

既然转基因种子已经发布了我们现在可以谈谈了看起来 iOS7 中的 webkit overflow scrolling touch 已损坏最初不在屏幕上的元素的触摸事件不会触发或者在某些情况下只是不可靠这是一个例子
Google Chrome 106 可拖动导致元素消失

使用拖放元素时绝对定位元素中包含的大多数其他元素都会从屏幕上消失如果我调整窗口大小这些元素会出现但在开始拖动时会再次消失我在最新版本的 Google Chrome 106 和 Beta 版本 107 0 5304 18 以及现在的
使用 JS 合并具有相同值的相邻 HTML 表格单元格

我已经为此苦苦挣扎了一段时间我有一个根据一些 JSON 数据自动生成的表该数据可能会有所不同我想合并第一列中具有相同值的相邻单元格例如此表中的鱼和鸟 table tr td fish td td salmon td tr tr
为范围旋钮 ionic-range 添加边框颜色

我正在使用离子范围添加范围滑块并想向范围旋钮添加边框由于它的 ionic4 和范围旋钮是 Shadow dom 的一部分我无法使用范围旋钮的 border 属性直接更改边框我已附上我想要实现的图像范围旋钮周围有白色边框现有属性只
闪亮井板宽度

library shiny library shinydashboard ui lt dashboardPage dashboardHeader dashboardSidebar dashboardBody wellPanel tags d

随机推荐

是否可以为气泡图制作图例？

目前互联网上没有使用 dc js 和 dc legend 函数的带有图例的气泡图的示例 that sessions scatterplot width 830 height 350 transitionDuration 1000 marg
属性列表还是继承丛林？

我有 2 个应用程序我们称它们为 AppA 和 AppB 相互通信 AppA 正在向 AppB 发送对象可能有不同的对象 AppB 并不支持每个对象一个对象可以是一个模型想象一下游戏其中模型是车辆房屋人等可能有不同的 App
铬中的 SQLite

是否可以制作像 Firefox 扩展一样与 sqlite 数据库交互的 chrome 扩展您能给我一些建议或链接吗哪里有关于开发与 sqlite 交互的 chrome 扩展的更多信息谢谢您可以使用网络 SQL API http de
如何在 PrimeFaces 的工具提示上显示错误消息时摆脱空工具提示？

我在某处显示错误消息
如何在 R 中重置 par(mfrow)

我设置了 par mfrow c 1 2 现在每次我绘制它时它都会显示将其分成 2 个图我怎样才能将其重置为仅显示一个图非常感谢您可以重置 mfrow 参数 par mfrow c 1 1
阻止垃圾邮件发送者创建帐户（reCaptcha 不起作用）

您好我们刚刚在我们的电子邮件系统中注意到一堆尼日利亚垃圾邮件帐户现在我们的注册表单中确实有一个 reCaptcha 但显然他们手动或以其他方式绕过了它这似乎是一种半手动规避因为帐户不是批量创建的而是以中间间隔几分钟的方式源源不断
enable_if：不带参数的 void 成员函数的最小示例

我正在努力更好地理解std enable if在 C 11 中并一直在尝试编写一个最小的示例一个类A具有成员函数void foo 根据类型有不同的实现T来自类模板下面的代码给出了所需的结果但我还没有完全理解它为什么版本V2工作但
Double 数据类型，计算小数位后的小数

下面的方法应该返回这个双精度值有多少小数精度尾随数字的数量的答案当值看起来像 5900 43 5900 043 等等时我就猜对了当该方法收到 5900 00 时它返回 0 这是错误的在我的需要中
从单独的线程访问表单的控件

我正在练习线程并遇到这个问题情况是这样的我在一个表单上有 4 个进度条一个用于下载文件一个用于显示页面加载状态等我必须从单独的线程控制每个 ProgressBar 的进度问题是我得到了无效操作异常其中说跨线程操作无效控制 p
按引用传递引用与按值传递引用 - C#

问候我明白了按值传递和按引用传递之间的区别但是通过 ref 传递引用例如数组和通过值传递数组是我似乎无法理解的如何通过引用传递引用 int myArray 1 2 3 PassByVal myArray PassByRef ref
什么时候不应该使用 React 备忘录？

我一直在玩React 16 6 0最近我喜欢这个想法反应备忘录但我一直无法找到有关最适合实现它的场景的任何内容 React 文档 https reactjs org docs react api html reactmemo https
使用后置变量传递表数据

基本上我有一个表其中包含来自数据库的一堆数字其中包含总计小计列我不打算将任何总数添加到数据库中但我需要将总数从一页传递到下一页我似乎无法使用 PHP 将它们作为后置变量正确传递我想知道这是否是一个糟糕的策略其次我应该做什么
如何为角度反应形式的自定义验证器编写单元测试用例？

我有一个自定义模型驱动的表单验证器来验证最大文本长度 export function maxTextLength length string return function control FormControl const maxLeng
如何使用 Spring Data JPA 和 Hibernate 执行 H2 存储过程？

我想使用 Spring Data JPA 和 Hibernate 来执行一个简单的 H2 数据库存储过程存储过程类 public class H2StoredProcedures public static String stringIn
Java 正则表达式 (?i) 与 Pattern.CASE_INSENSITIVE

我在用着 b w W 1 b 随着input input replaceAll regex 1 查找字符串中的重复单词并删除重复项例如字符串输入 for for for 将变为 for 然而即使我使用过它也无法将 Hello hel
@Value 变量在使用 @TestPropertySource 的单元测试中为 NULL

在下面的单元测试中我手动提供属性并尝试从现有的 YAML 资源文件中读取它们尝试了不同的策略 TestPropertySource the Value 属性未设置我总是为它们获取 NULL SpringBootConfiguratio
当我在 flutter 应用程序中切换 appbar 时，如何使 webview 不重新加载？

我希望当我在 flutter 应用程序中切换 appbar 时 webview 不重新加载但我不知道该怎么做很抱歉我是初学者这是我录制的gif I searched on Google but I didn t find an ans
Excel vba - 禁用鼠标事件

我正在开发一个Excel 2010工作簿处于手动公式计算模式文件 gt 选项 gt 公式 gt 工作簿计算 gt 手册但是我想要一些菜单选项来导致工作簿的重新计算所以我使用以下代码 Private Sub Worksheet Ch
突出显示 SWT 树节点中的特定字符串

我有一个要求首先要加载树树包含 4 个级别有一个文本字段用户可以在其中输入 filterText 然后可以按搜索按钮在树中在四个级别中的任何一个中如果与过滤器文本匹配则该特定字符串仅应以黄色突出显示而不是整个节点及其相应的
如何阻止固定对象超出其父容器？

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

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

如何阻止固定对象超出其父容器？ 的相关文章

随机推荐

热门标签

如何阻止固定对象超出其父容器？的相关文章