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

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

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

仅 IE9_有时_会忽略

我们正在开发一个大量使用这是典型的 TYPO3 网站该网站是在子目录中开发的稍后将被重新定位到顶级目录因此我们无法轻易删除我们的客户告诉我们有时当她浏览新页面时她得到的页面内容没有应用布局我们对此进行了调试仅在 IE9 中
使用反增量更改 z-index

我尝试制作一个图像滑块当鼠标悬停在一个点上时它将显示图片我也尝试使用在图像之间切换z index但什么也没动 slider counter reset index 1000 slider input name slide switch
引导导航栏菜单与文本重叠

我使用最新版本的引导程序当我调整屏幕浏览器的大小时使用小切换按钮下拉导航栏时导航栏会重叠页面上的文本而不是向下推页面内容我已经多次研究过这个问题我尝试将 padding bottom 放在导航栏上将 padding top 放
为什么我的列表项项目符号与浮动元素重叠

我有一个 XHTML Strict 页面我在其中将图像浮动在常规文本段落旁边一切都很顺利除非使用列表而不是段落列表的项目符号与浮动图像重叠更改列表或列表项的边距没有帮助边距是从页面左侧开始计算的但浮动会将列表项推到右侧insi
jQuery：离线后 POST 出错（iOS 和 Chrome）

我构建了一个具有离线功能的 HTML5 Web 应用程序使用 AppCache 程序流程为 Online 在网络上时应用程序预加载一些基本信息工作 Offline 用户拿着装有应用程序的平板电脑offline 然后在应用程序上执行他们
如何在不使用变换或顶部/左侧的情况下转换列表中项目的位置

有一天我偶然发现一个例子 https codepen io itslit pen gvKrMY它使用 Vue js 但我的问题更多是关于 Vue 用于实现状态之间转换的 CSS 和 HTML 卡片暂时获得等级 shuffleMedium m
jQuery - 如何从 div > p 获取文本

如何从 div 类中获取主题名称 div class subject img src image eng jpg p English p div div class subject img src image bio jpg p Biolo
@media语法/可能的组合

我见过其中一些 media print media screen handheld print projection media all media all and property value media screen and prope
在表格上使用上下文样式将点边框应用于特定单元格

我以前有过问了一个问题 https stackoverflow com questions 6326266 issue with applying dotted border to cells in table design在这个问题上你
使用 css 简单地将对象居中，无需修改

我想使用 CSS 将对象居中而不需要任何技巧这可能吗如何实现我已经尝试过了但是我的 p 标签消失了 centered position fixed top 50 left 50 有多种方法可以使元素居中但这取决于您的元素是什么以
Angular - CSS - 自定义类型=文件输入，如何使用按钮而不是标签？

我制作了一个类型为 file 的自定义输入字段因为我不喜欢默认的输入字段为了实现这一目标我做了
CSS 类命名约定

在网页上有两个控件块主要和次要大多数人会使用什么类名选择一 div class primary controls div
Jquery 数据表列总和

我只是参考一下这个链接 https datatables net examples advanced init footer callback html了解如何获取 jquery 数据表中的列总计但我已经完成了一半的项目我在html页面
尝试将数据存储在点击器网站中

我正在尝试存储一个名为的变量score无论何时刷新您都会一次又一次地使用它我不明白的是它的代码是什么我尝试了一些方法但似乎都不起作用这是我的答题器网站但是当我尝试使用 JavaScript 来存储它时它不起作用window o
使用 CSS 使一行 div 高度相同

我有一排必须具有相同高度的 div 但我无法提前知道该高度可能是多少内容来自外部源我最初尝试将 div 放置在封闭的 div 中并将它们向左浮动然后我将它们的高度设置为 100 但这没有明显的效果通过将封闭 div 的高度设置为固定
使用 CSS 或 Javascript 填充动画

我只是想知道是否可以使用 CSS 或 javascript 创建填充动画基本上我想创建一个填充动画如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png
在 HTML5 画布中，如何用我选择的背景遮盖图像？

我试图用画布来实现这一点 globalCompositeOperation 但没有运气所以我在这里问这里有类似的问题但我没有在其中找到我的案例我的画布区域中有图层从下到上的绘制顺序画布底座填充纯白色 fff 用fillRect
页面上使用 HTML Editor Extender 进行回发会导致 IE11 中出现 JavaScript 错误

我已将 HTML 编辑器扩展程序添加到我正在处理的页面中现在每当我在页面上发回帖子时都会收到以下 Javascript 错误 JavaScript 运行时错误参数无效之后什么也没有发生这在 IE10 或更低版本以及我所知道的所有其
在 HTML 下拉列表中有一个滚动条

我正在寻找一种在 HTML 的下拉列表中添加滚动条的方法这样如果下拉列表包含的内容超过例如 5 项将出现滚动条以查看其余项这是因为我将被迫列出一些大清单过去几个小时我一直在谷歌上搜索它但没有运气它需要适用于 IE8 FF 和 C
使用css bootstrap时如何仅向一列添加右边框？

我正在尝试使用CSS引导框架 http getbootstrap com css tables在我的项目中我正在使用带有以下类的表table table bordered table striped 我想删除除第一列之外的所有列的边框这

随机推荐

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

目前互联网上没有使用 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

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

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

随机推荐

热门标签

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