首页 > 其他分享 >position值有哪些,特点及应用

position值有哪些,特点及应用

时间:2024-03-24 21:31:52浏览次数:17  
标签:定位 滚动 哪些 top 元素 sticky position 值有

1.static(默认值)这是元素的默认值。除非另外指定,否则所有元素都使用 static 定位。top、bottom、left、right 和 z-index 属性将无效。


2.relative:(相对定位)元素相对于其正常位置进行定位。因此,"left:20px" 会向元素的左边添加 20 像素。其他属性(如 top、right 和 bottom)也以类似的方式工作。即使元素移动,它仍然保留其在文档流中的空间。


3.absolute:(绝对定位)元素相对于最近的已定位父元素(即 position 不为 static 的元素)进行定位。如果没有已定位的父元素,那么它会相对于初始包含块进行定位。


4.fixed:(固定定位)元素相对于浏览器窗口进行定位,即使页面滚动,它仍然会停留在同一的位置。top、bottom、left、right 等属性将设置元素相对于浏览器窗口的位置。


5.sticky:(粘性定位)这是相对于用户的滚动位置定位的元素,基本上是一种相对定位和固定定位的混合。一个 sticky 元素在用户滚动超过其滚动阈值之前为相对定位,之后为固定定位。

固定导航栏使用sticky属性,我们可以很容易地实现导航栏在滚动到特定位置后固定在屏幕顶部的效果,而无需使用JavaScript来动态添加或删除position:fixed属性。这不仅简化了代码,还提高了用户体验,避免了由于JavaScript滚动事件处理不当而导致的页面抖动问题。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Title with Sticky Position</title>
<style>
  /* 在这里添加CSS样式 */
</style>
</head>
<body>

<header>
  <h1 class="sticky-title">固定在顶部的标题</h1>
</header>

<main>
  <p>这里是页面的主要内容...</p >
  <!-- 添加更多内容,使页面可以滚动 -->
</main>

</body>
</html>
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

header {
  position: sticky;
  top: 0;
  background-color: #333;
  color: white;
  padding: 10px 0;
  text-align: center;
  z-index: 100; /* 确保标题在内容之上 */
}

main {
  padding-top: 50px; /* 为内容添加上边距,以避开固定的标题 */
}

在这个例子中,CSS样式定义了header的position为sticky,并设置top为0,这样当页面向下滚动时,标题会固定在浏览器的顶部。同时,z-index属性确保标题在其他内容之上。
main元素有一个padding-top,用于确保当标题固定在顶部时,内容不会覆盖标题下方的空间。

标签:定位,滚动,哪些,top,元素,sticky,position,值有
From: https://blog.csdn.net/zlc516/article/details/136988374

相关文章

  • 在Linux中,文件权限有哪些?有什么作用?
    在Linux中,文件权限是系统安全性的关键组成部分,它决定了哪些用户或用户组可以访问文件或目录。文件权限主要有以下几种:读权限(r):表示可以读取文件的内容。例如,使用cat或less命令查看文件内容时,需要该文件具有读权限。写权限(w):允许用户修改文件的内容。例如,使用vim或vi等文本编辑器......
  • Struts2的工作原理是什么?Struts2中的MVC模式包含哪些核心组件?在Struts2中如何实现转发
    Struts2的工作原理是什么?Struts2的工作原理主要基于MVC设计模式,它充当Web应用框架的控制器层(Controller),负责建立模型与视图之间的数据交互。具体来说,Struts2的工作流程如下:启动与加载:当Web应用启动时,服务器会加载web.xml配置文件。在这个过程中,StrutsPrepareAndExecuteFi......
  • Struts2中type类型有哪些?Struts2默认能解决get和post提交方式的乱码问题吗?Struts2中如
    Struts2中type类型有哪些?Struts2中type类型指的是结果类型,用于指定Action执行完成后如何返回结果给客户端。Struts2框架提供了多种结果类型,以满足不同的业务需求和页面跳转方式。以下是一些常见的Struts2结果类型:dispatcher:这是默认的结果类型,相当于servlet的forward,即服......
  • 网站建设有哪些步骤,需要哪些资源,预算大概是多少?
    网站建设通常涉及以下步骤,每个步骤都需要相应的资源投入,预算也会根据这些步骤的具体需求和选择而变化:网站建设步骤: 1.需求分析:  资源:项目负责人、需求分析师、业务相关人员  工作内容:明确网站目标、定位、功能需求、内容结构、用户群体、技术要求等,形成详细的网站......
  • Pr软件支持什么视频格式?可以导入哪些格式的视频素材文件
    某些文件扩展名(如MOV、AVI和MXF)是指容器文件格式,而不是特定的音频、视频或图像数据格式。容器文件可以包含使用各种压缩和编码方案编码的数据。PremierePro可以导入这些容器文件,但是否能导入其中包含的数据,则取决于安装的编解码器(尤其是解码器)。支持的序列、静止图像......
  • Python中的数据集包含哪些?
    1.set()集合格式:{元素1,元素2,元素3},元素之间用逗号分隔,每个元素的类型可以不一样,比如{1,2,3},{'a','b','c'},{'a',1,'b',2}set集合是无序的,里面的元素不可重复 2.list集合(列表)格式:[元素1,元素2,元素3],元素可以是任何类型,比如字符串,数字,字典对象等list集合是有序的,里面的元......
  • Python中常用模块有哪些?
    1.importosos模块提供很多方法用来处理文件和目录 2.importsyssys模块提供了一系列运行环境的变量和函数,例如argv变量,argv变量是一个包含命令行参数的列表 3.fromminioimportMiniominio是一个对象存储服务,可以用来存储大量的数据,比如图片,视频,文档等 4.frommysq......
  • Vue中会出现哪些跨域问题?如何解决
    跨域跨域指的是在网络通信中,由于安全策略的限制,浏览器的一个文档或者脚本试图去请求另一个源(域名、协议或端口)下的资源时,会受到限制或阻止。这种情况通常发生在网页上的JavaScript发起跨域请求时。跨域请求可能会导致安全漏洞,因此浏览器通常会执行同源策略(Same-OriginPolicy),阻......
  • 云打印的应用场景有哪些?
    近段时间以来,随着互联网的发展,云打印也随之火热。那么云打印的应用场景有哪些?有哪些用户需要用到云打印呢?今天就带大家来了解一下。云打印的应用场景有哪些?有哪些用户需要用到云打印?现在能用到云打印的场景还是非常多的,这边按照各个应用场景来给大家分别介绍一下,如果你也符合的......
  • 云虚拟主机有哪些作用?
    云虚拟主机是一款虚拟主机产品,云虚拟主机是由云计算与虚拟主机共同产生的,接下来小编就带领大家一起来了解一下云虚拟主机都有哪些作用吧!云虚拟主机能够通过在多个服务器上分散虚拟机实例,来提高服务器的可用性和冗余备份,极大地提高了应用的稳定性和可靠性;云虚拟主机能够根据企......