个人中心
gpt4 book ai didi

html - 将固定栏添加到HTML页面

转载 作者：行者123 更新时间：2023-11-27 23:56:01 26 4
gpt4 key购买 nike

我需要创建一个HTML页面，它由两个主要部分组成：一个固定的标题部分（一个选择栏）和一个显示一些文本的第二部分。我尝试了下面的代码，但由于我是CSS新手，这并不像我想的那样工作：

9 <style type=\"text/css\">
 10 #header {
 11     position:fixed;
 12     top:0px;
 13     margin:auto;
 14     width: 100%;
 15     background:#F0F0F0;
 16 }
 17 #content {
 18     position:absolute;
 19     top:90px;
 20 }
 21 </style>
 22 </head>
 23
 24 <body>
 25 <div id=header>
 26 <h1> HEADER: Long header................................................................... </h1>
 27 </div>
 28 <div id=content>
 29 <p> Content...</p>
 30 </div>
 31 </body>

“content”部分位于“header”下面，但我对这段代码有两个问题：
滚动时，“content”文本会覆盖“header”文本。我
需要隐藏标题下滚动的“内容”文本。
调整大小时，如果标题包含长文本，调整大小后，该文本将转到下一行，这将影响“内容”部分，该部分从顶部开始以90px开始。我如何定位我的内容部分，使其在调整大小时显示在“标题”下面，但当滚动到下面时。
提前谢谢你的帮助！

最佳答案

尝试以下操作：

#header {
      position:fixed;
      top:0px;
      left:0px;
      margin:auto;
      width: 100%;
      height:90px; /* To make Underlying #Content visible */
      overflow:hidden; /* This will hide extra content after resizing */
      z-index:10; /* This is Important */
      background:#F0F0F0;
  }
#content {
     position:absolute;
     top:90px;
     left:0px;
     z-index:1; /* Any value <10 */
 }

添加 z-index和 overflow将解决您的问题。

DEMO
Z-索引：
CSS中的z-index属性控制重叠元素的垂直堆叠顺序。就像在，哪一个看起来更接近你。
溢出：
页面上的每个元素都是一个矩形框。这些框的大小、位置和行为都可以通过CSS控制。我所说的行为，是指当盒子内部和周围的内容发生变化时，盒子是如何处理的。例如，如果不设置框的高度，则该框的高度将增长为容纳内容所需的大小。但是，如果在框上设置了特定的高度或宽度，而其中的内容无法容纳，会发生什么情况？这就是CSS overflow属性的来源，允许您指定希望如何处理它。
overflow属性有四个值：visible（默认）、hidden、scroll和auto。也有姊妹物业overflow-y和overflow-x，它们的采用率较低。
CSS定位：
Static.：这是每个页面元素的默认值。不同的元素没有不同的默认定位值，它们都是静态的。静态并不意味着什么，它只是意味着元素将像往常一样流入页面。您将元素设置为position的唯一原因是：static是强制删除应用于您无法控制的元素的某些位置。这是相当罕见的，因为定位不级联。
相对的：这种定位可能是最容易混淆和误用的。它的真正含义是“相对于自身”。如果您设置position:relative；在一个元素上，但没有其他的定位属性（top、left、bottom或right），那么它将完全不会影响它的定位，如果您将其保留为position:static，那么它将完全相同；但是如果您确实给它一些其他的定位属性，比如top:10px；，它将把它的位置从正常位置向下移动10像素。我相信你可以想象，根据元素的常规位置来移动元素的能力是非常有用的。我发现自己多次使用这个来排列表单元素，这些元素往往不想按我的要求排列。
当您设置位置时，还有两件事发生：相对的；在您应该注意的元素上。其一是它引入了在该元素上使用z-index的能力，这实际上并不适用于静态定位的元素。即使您没有设置z-index值，这个元素现在也会出现在任何其他静态定位的元素之上。在静态定位的元素上设置一个更高的z索引值是无法抵抗的。另一件事是它限制了绝对定位的子元素的范围。作为相对定位元素的子元素的任何元素都可以绝对定位在该块中。这带来了一些我在这里谈到的强有力的机会。
绝对的。：这是一种非常强大的定位类型，允许您将任何页面元素准确地放置在所需的位置。使用“定位”属性“上”、“左下”和“右”来设置位置。请记住，这些值将相对于具有相对（或绝对）位置的下一个父元素。如果没有这样的父元素，它将一直默认返回到元素本身，这意味着它将相对于页面本身放置。
关于绝对定位，需要记住的最重要的一点是，这些元素从页面上的元素流中移除。具有这种定位类型的元素不受其他元素的影响，也不影响其他元素。每次使用绝对定位时都要认真考虑这一点。过度使用或不当使用会限制网站的灵活性。
固定：这种类型的定位相当罕见，但肯定有它的用途。固定位置元素相对于视口或浏览器窗口本身定位。当窗口被滚动时，视窗不会改变，所以当页面被滚动时，一个固定位置的元素会停留在原来的位置，产生一种有点像旧式“框架”的效果。看看这个网站（更新：死链接，对不起），左边的边栏是固定的。这个网站是一个很好的例子，因为它展示了固定定位的好和坏的特点。这样做的好处是，它可以使导航始终显示在页面上，并在页面上创建感兴趣的效果。糟糕的是存在一些可用性问题。在我小小的笔记本电脑上，侧边栏中的内容被切断，我无法向下滚动查看其余内容。另外，如果我一直向下滚动到页脚，它会重叠页脚内容，不允许我看到所有这些。凉爽的效果，可以有用，但需要彻底测试。
Dont Only Write The Code. Understand It before writing.
承蒙： http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
希望有帮助。
更多信息： http://css-tricks.com

关于html - 将固定栏添加到HTML页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24012393/

26 4 0
文章推荐： javascript - 如何在可滚动容器上使用 wow.js
文章推荐： java - 从 JTextPane 获取没有 HTML 标签的文本
文章推荐： javascript - 带动画下划线的中心链接
文章推荐： c++ - vector push_back 不起作用 c++
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com