百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 文章教程 > 正文

CSS 定位详解

yund56 2025-04-15 16:44 21 浏览

CSS 有两个最重要的基本属性,前端开发必须掌握:displayposition

display属性指定网页的布局。两个重要的布局,我已经介绍过了:弹性布局flex[1]和网格布局grid[2]

本文介绍非常有用的position属性。我希望通过10分钟的阅读,帮助大家轻松掌握网页定位,说清楚浏览器如何计算网页元素的位置,尤其是新引进的sticky定位。

本文由国内最大的在线教育平台之一“腾讯课堂”[3]赞助。他们现在启动了“腾讯课堂101计划”[4],推广平台上的课程资源,有不少优质内容。希望提高前端技术水平的同学,可以留意一下本文结尾的免费课程信息。

一、position 属性的作用

position属性用来指定一个元素在网页上的位置,一共有5种定位方式,即position属性主要有五个值。

ostaticorelativeofixedoabsoluteosticky

下面就依次介绍这五个值。最后一个sticky是2017年浏览器才支持的,本文将重点介绍。

二、static 属性值

staticposition属性的默认值。如果省略position属性,浏览器就认为该元素是static定位。

这时,浏览器会按照源码的顺序,决定每个元素的位置,这称为“正常的页面流”(normal flow)。每个块级元素占据自己的区块(block),元素与元素之间不产生重叠,这个位置就是元素的默认位置。

注意,static定位所导致的元素位置,是浏览器自主决定的,所以这时topbottomleftright这四个属性无效。

三、relative,absolute,fixed

relativeabsolutefixed这三个属性值有一个共同点,都是相对于某个基点的定位,不同之处仅仅在于基点不同。所以,只要理解了它们的基点是什么,就很容易掌握这三个属性值。

这三种定位都不会对其他元素的位置产生影响,因此元素之间可能产生重叠。

3.1 relative 属性值

relative表示,相对于默认位置(即static时的位置)进行偏移,即定位基点是元素的默认位置。

它必须搭配topbottomleftright这四个属性一起使用,用来指定偏移的方向和距离。

div { position: relative; top: 20px;}

上面代码中,div元素从默认位置向下偏移20px(即距离顶部20px)。

3.2 absolute 属性值

absolute表示,相对于上级元素(一般是父元素)进行偏移,即定位基点是父元素。

它有一个重要的限制条件:父元素不能是static定位,否则定位基点就会变成整个网页的根元素html。另外,absolute定位也必须搭配topbottomleftright这四个属性一起使用。

/* HTML 代码如下 
*/
#father { positon: relative;}#son { position: absolute; top: 20px;}

上面代码中,父元素是relative定位,子元素是absolute定位,所以子元素的定位基点是父元素,相对于父元素的顶部向下偏移20px。如果父元素是static定位,上例的子元素就是距离网页的顶部向下偏移20px

注意,absolute定位的元素会被“正常页面流”忽略,即在“正常页面流”中,该元素所占空间为零,周边元素不受影响。

3.3 fixed 属性值

fixed表示,相对于视口(viewport,浏览器窗口)进行偏移,即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化,好像固定在网页上一样。

它如果搭配topbottomleftright这四个属性一起使用,表示元素的初始位置是基于视口计算的,否则初始位置就是元素的默认位置。

div { position: fixed; top: 0;}

上面代码中,div元素始终在视口顶部,不随网页滚动而变化。

四、sticky 属性值

sticky跟前面四个属性值都不一样,它会产生动态效果,很像relativefixed的结合:一些时候是relative定位(定位基点是自身默认位置),另一些时候自动变成fixed定位(定位基点是视口)。

因此,它能够形成“动态固定”的效果。比如,网页的搜索工具栏,初始加载时在自己的默认位置(relative定位)。

页面向下滚动时,工具栏变成固定位置,始终停留在页面头部(fixed定位)。

等到页面重新向上滚动回到原位,工具栏也会回到默认位置。

sticky生效的前提是,必须搭配topbottomleftright这四个属性一起使用,不能省略,否则等同于relative定位,不产生“动态固定”的效果。原因是这四个属性用来定义“偏移距离”,浏览器把它当作sticky的生效门槛。

它的具体规则是,当页面滚动,父元素开始脱离视口时(即部分不可见),只要与sticky元素的距离达到生效门槛,relative定位自动切换为fixed定位;等到父元素完全脱离视口时(即完全不可见),fixed定位自动切换回relative定位。

请看下面的示例代码。(注意,除了已被淘汰的 IE 以外,其他浏览器目前都支持sticky。但是,Safari 浏览器需要加上浏览器前缀-webkit-。)

#toolbar { position: -webkit-sticky; /* safari 浏览器 */ position: sticky; /* 其他浏览器 */ top: 20px;}

上面代码中,页面向下滚动时,#toolbar的父元素开始脱离视口,一旦视口的顶部与#toolbar的距离小于20px(门槛值),#toolbar就自动变为fixed定位,保持与视口顶部20px的距离。页面继续向下滚动,父元素彻底离开视口(即整个父元素完全不可见),#toolbar恢复成relative定位。

五、 sticky 的应用

sticky定位可以实现一些很有用的效果。除了上面提到“动态固定”效果,这里再介绍两个。

5.1 堆叠效果

堆叠效果(stacking)指的是页面滚动时,下方的元素覆盖上方的元素。下面是一个图片堆叠的例子,下方的图片会随着页面滚动,覆盖上方的图片(查看 demo[5])。

HTML 代码就是几张图片。

CSS 代码极其简单,只要两行。

div { position: sticky; top: 0;}

它的原理是页面向下滚动时,每张图片都会变成fixed定位,导致后一张图片重叠在前一张图片上面。详细解释可以看这里[6]

5.2 表格的表头锁定

大型表格滚动的时候,表头始终固定,也可以用sticky实现(查看 demo[7])。

CSS 代码也很简单。

th { position: sticky; top: 0; }

需要注意的是,sticky必须设在元素上面,不能设在元素,因为这两个元素没有relative定位,也就无法产生sticky效果。详细解释可以看这里[8]

(正文完)

免费前端全栈课程

初学者刚接触前端,往往会被一大堆技术名词、框架和工具,搞得眼花缭乱。

到底哪些技术是目前的主流技术栈,既能用于公司的开发实务,又能为自己的简历增添亮点?

下面就是一套目前主流的前端技术栈。

(1)Node.js:服务器端的 JavaScript 运行环境,不管哪种前端开发,都必不可少的底层环境。

(2)Webpack:语法转换工具,把 ES6/TypeScript/JSX 语法转成浏览器可以运行的代码。

(3)Koa2:一个非常流行、简洁强大的 Node.js 后端的 Web 开发框架。

(4)MongoDB:目前应用最广泛的非关系数据库之一,功能丰富,用法较简单。

(5)Vue 全家桶:

oVue:前端基础框架oVuex:配套的前端状态管理库。oVue Router:官方的路由插件,构建单页面应用必不可少。oVue CLI:脚手架工具,帮你快速上手 Vue 开发,无需再花多余时间去实现项目架构。oVant:有赞前端团队开发的轻量级移动端 Vue 组件库,让你快速使用已经封装好的各种页面组件。

看到这个名单,你是不是感到有点头大,全部掌握它们需要多少时间啊?

现在,腾讯课堂就有一门这样的课程,内容包含了所有这些工具,教你怎么用它们从头完成一个全栈项目,亲手做出一个手机端的移动商城,是由 慕课网的精英讲师--谢成老师讲授

该课程的制作单位是青盟科技。它是《腾讯课堂101计划》重点推广的优质机构,已有7年 IT 行业教学经验,培养收费学员2000+,有超过72%的学员都进入到名企大厂。如果你想了解课程的详细内容,获取课程大纲,或者想接受系统的前端培训,可以登录腾讯课堂查看“青盟科技”。

(完)

References

[1]弹性布局flex:http://www.ruanyifeng.com
/blog/2015/07/flex-grammar.html

[2]网格布局grid:http://www.ruanyifeng.com
/blog/2019/03/grid-layout-tutorial.html

[3]“腾讯课堂”:https://ke.qq.com/?utm=ruanyifeng

[4]“腾讯课堂101计划”:https://edu.qq.com/a/20190119/005414.htm

[5]demo:https://jsbin.com/fegiqoquki/edit?html,css,output

[6]这里:
https://dev.to/vinceumo/slide-stacking-effect-using-position-sticky-91f

[7]demo:https://jsbin.com/decemanohe/edit?html,css,output

[8]这里:https://css-tricks.com
/position-sticky-and-table-headers/

相关推荐

如何在Office 中编辑 PDF?附详细化步骤

PDF很受欢迎,因为它能在不同的设备和操作系统上仍然保持原有格式。但是,这也意味着直接更改PDF文件比其他格式更难更复杂。值得庆幸的是,Microsoftoffice和UPDF帮你解决这一难题。一...

我的 Windows 装机必备软件清单

今天给大家分享下我的装机必备软件,都是用了好多年的软件神器。靠谱、好用、无广告,Windows电脑必备软件,收藏这一篇就够了!01.浏览器王者:Chromehttps://www.google.c...

Docnet Core 是一个轻量级、高性能的 .NET PDF 操作库

DocnetCore介绍DocnetCore是一个轻量级、高性能的.NETPDF操作库,依托于PDFium渲染引擎,提供强大的PDF文档解析、渲染、操作等功能。它完全支持.NET...

分享三款好用的PDF编辑软件,轻松处理PDF

作为一名需要经常和PDF文件打交道的工作者,我来分享一下几款好用的PDF编辑软件,并详细分析了它们的优缺点,希望能帮你找到合适的工具。1.AdobeAcrobatDC作为PDF格式的发明者,Ado...

PDF文档创建工具软件:novaPDF OEM 11.9 Build 432 for Windows

novaPDFOEM是一款实用高效的软件,从头开始设计,让您尽可能轻松地在应用程序中添加PDF打印功能。换句话说,这个实用程序是专门为应用程序开发人员设计的,可以直接在程序安装程序中集成为PDF打印...

线性表顺序存储结构求集合的并,交,补,差(源代码附上 超详细)

一:算法分析1)用数组A,B,C,E表示集合。假定A={1,3,4,5,6,7,9,10},  B={2,,3,4,7,8,10},E={1,2,3,4,5,6,7,8,9,10},  输入数组A...

分享一套SpringBoot开发博客系统源码,包含完整开发文档和视频

基本信息项目名称:eblog摘要:eblog是一个基于Springboot2.1.2开发的博客学习项目,为了让项目融合更多的知识点,达到学习目的,编写了详细的从0到1开发文档。主要学习包括:自定义Fr...

通达信指标合集〔源码齐全〕

很多朋友问到我哪款指标好用,这里我说一下,之所以有很多不同的指标是因为我们在针对不同的盘面情况的时候使用的指标是不同的,我给到的指标一般来讲就目前的环境来讲都是比较适合的,今天我就把我平时自己常用的指...

巅峰对决!Spring Boot VS .NET 6

SpringBoot和ASP.NETCore都是企业中流行的Web框架,对于喜欢C#的人会使用ASP.NETCore,而对于Java或Kotlin等基于JVM的语...

在asp.net core 中控制访问权限的方法

Intro#由于项目需要,需要在基于asp.netmvc的Web项目框架中做权限的控制,于是才有了这个权限控制组件,最初只是支持netframework,后来dotnetcore2.0...

ASP.NET是否无生存之地?

ASP.NET,这个已经很久的技术,总觉得已经被时代淘汰,我们公司是一个10人小公司,几个十年十五年的项目还是用ASP.NET开发的。这两年由于客户的需求变化,我们公司也顺势开始对这些项目重新开发,改...

Spring Boot + Vue.js 实现前后端分离(附源码)

作者:梁小生0101链接:juejin.im/post/5c622fb5e51d457f9f2c2381SpringBoot+Vue.js前后端涉及基本概念介绍,搭建记录,本文会列举出用到环...

ASP.NET Core 中的 Mapster 使用入门教程

在本文中,我们将学习如何在ASP.NETCore应用程序中使用Mapster。首先,我们将了解Mapster是什么以及如何将其安装到.NETCore应用程序中。然后,我们将在使用...

Asp.net常用方法及request和response-a

asp.net教程asp.net常用方法:1、Request.UrlReferrer请求的来源,可以根据这个判断从百度搜的哪个关键词、防下载盗链、防图片盗链,可以伪造(比如迅雷)。(使用全局一般处理...

ASP.NET Core使用功能开关控制路由访问

前言在前面的文章,我们介绍了使用Middleware有条件地允许访问路由(《ASP.NETCore使用Middleware有条件地允许访问路由》)。而对于一些试验性的功能,我们并不希望用密码去控制是...