【CSS笔记】CSS布局之五种定位方式（静态、相对、绝对、固定、粘性）

已于 2022-10-23 14:52:16 修改
阅读量5.9k 收藏 49
点赞数 5
CC 4.0 BY-SA版权
分类专栏： 【Web前端笔记】 文章标签： CSS定位 绝对定位 相对定位 固定定位 粘性定位
于 2022-08-18 18:41:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39826207/article/details/126409050
本文详细介绍了CSS的五种定位方式：静态定位、相对定位、固定定位、绝对定位和粘性定位。静态定位是默认方式，相对定位会以自身为参考点移动，固定定位基于浏览器窗口定位，不受滚动影响。绝对定位可自定义参考点，粘性定位则是静态和固定的结合，当满足特定条件时切换定位状态。每种定位方式的特点和用法都通过案例进行了阐述。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

一、CSS定位布局

1.1、static静态定位

1.2、relative相对定位

1.3、fixed固定定位

1.4、absolute绝对定位

（1）默认绝对定位参考点

（2）设置绝对定位参考点

1.5、sticky粘性定位

（1）sticky粘性定位失效的原因

（2）sticky案例

一、CSS定位布局

CSS定位布局，是通过【position】属性设置的，position属性可以有如下五个取值：

【position】属性取值：

  • static：静态定位。
  • relative：相对定位。
  • fixed：固定定位。
  • absolute：绝对定位。
  • sticky：粘性定位。

给元素设置【position】属性之后，设置元素的定位方式，然后再通过【top、left、right、bottom】四个属性设置定位的位置。

注意：如果设置了position属性，但是没有设置【top、left、right、bottom】属性，那么position属性不会生效。

1.1、static静态定位

static静态定位，这种是元素默认的定位方式，也就说，没有设置position属性，和设置了【position：static；】属性，这个元素的显示效果是一样的。【top、left、ri

了解本专栏 订阅专栏 解锁全文 超级会员免费看
css定位方式之粘性定位元素，使用场景课程表或者财务报表或者活动表格，固定表头和左侧label显示
05-20 596
元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和（最近块级祖先 nearest block-level ancestor），包括 table-related 元素，基于toprightbottom和left的值进行偏移。偏移值不会影响任何其他元素的位置。该值总是创建一个新的注意，一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow是hiddenscrollauto或overlay。
CSS定位概要
weixin_46513985的博客
06-23 361
CSS定位概要
HTML+CSS 五种布局方式
热门推荐
winne雪
11-23 3万+
已知布局元素的高度，写出三栏布局，要求左栏、右栏宽度各为300px，中间自适应。 一、浮动布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>浮动布局
css布局——定位
最新发布
wangmiao1412的博客
06-24 1069
相对定位允许元素。当元素被设置为相对定位后，可以使用属性来调整它的位置，而。特点：1.，元素位置变化只是视觉效果上的变化，不会对其他元素产生任何影响。2.，若两个元素都进行定位，则后加入的元素层级更高。3.left不能和right一起设置，top和bottom不能一起设置。4.相对定位后也能用margin和浮动，但不推荐。（在浏览器的渲染流程中，.outerwidth;height;;padding;height;.box1;
CSS的几种定位方式
liu0513916的博客
10-10 1万+
CSS 为定位提供了一些属性，利用这些属性，可以建立列式布局。 css定位的几种方式： 1、static（静态定位）： 默认值。没有定位，当我们没有指定定位方式的时候，这时默认的定位方式就是static，也就是按照文档的书写布局自动分配在一个合适的地方，这种定位方式用margin来改变位置，对left、top、z-index等设置值无效，这种定位不脱离文档流； 2、relative（相对定位）： 定位为relative的元素脱离正常的文档流，但其在文档流中的位置依然存在，只是视觉上相对原来的位置有
HTML-CSS的几种布局
dengweihuan4949的博客
03-17 159
第一种 两栏式布局 1 <body> 2 <!-- 两栏式布局 --> 3 <!-- 想要的效果是左边图片右边文字 拉伸盒子文字的高度宽度自动改变 --> 4 <div class="box"> 5 <div class="left"> 6 ...
CSS定位深度解析：绝对、相对、固定与粘性定位
"前端，有关css 样式的重点内容笔记" ...- 粘性定位是介于静态和固定定位之间的解决方案，适用于特定滚动场景。 理解并熟练运用这些定位方法，是前端开发者构建响应式、动态和复杂的网页布局的关键。
CSS笔记(二) - 页面布局 盒子模型
JUN_7777的博客
02-08 2528
行内元素
Web之CSS笔记
算法工程师
11-18 770
CSS轮廓是用于在元素周围绘制线条的属性，位于边框边缘的外围，可以起到突出元素的作用。轮廓的样式、颜色和宽度可以通过CSS outline属性进行规定，轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。CSS position属性用于指定一个元素在文档中的定位方式，定位分为静态定位，相对定位，绝对定位，固定定位、粘性定位这五种；Css是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。标签引用外部的css文件。
CSS_Demo，文章《CSS笔记》配套代码
10-29
**定位（Positioning）**：CSS提供了多种定位方式，如静态定位（Static）、相对定位（Relative）、绝对定位（Absolute）、固定定位（Fixed）和粘性定位（ Sticky），它们决定了元素在页面上的位置。 **响应式设计...
CSS静态定位法
weixin_52634719的博客
10-27 243
position:static
定位
weixin_30896763的博客
03-09 154
文档流文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。 关于定位我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下： relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。 ...
css绝对布局
qq_37766224的博客
06-20 464
css 想在哪在哪position：absolute；left：50px；top：100px；
CSS绝对定位下的布局
qq_56515781的博客
05-16 342
CSS绝对定位下的布局
css中的相对布局和绝对布局及层叠关系
wyl164778的博客
07-26 1036
简单暴力，亲测有效！！！ 一、css中的相对布局和绝对布局 相对布局：position:relative; 绝对布局：position:absolute; 二、层叠关系 z-index:10;//值越大，越在上层，越先显示 三、组合解决问题 文字在图片指定位置显示 四、代码 div id="pptImgcontainer" style="width:350px;height: 230px"> <div style="position: absolute;z-index: 10;left:
CSS布局之定位 详解（相对定位、绝对定位、子绝父相、固定定位）
Esther_liew的博客
05-26 2786
CSS布局--定位详解（相对定位、绝对定位、子绝父相、固定定位）
CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky、inset）
朝阳39的博客
07-07 1631
依据最近一层的定位元素（position 值为 absolute/relative/fixed 的元素）定位，若无定位元素，则依据 body 定位。必须配合 left,right,top,bottom 一起使用，否则元素还在原文档流的位置。必须配合 left,right,top,bottom 一起使用，否则元素还在原文档流的位置。黏性定位元素的父元素高度不能和黏性定位元素的高度相同（否则没有实现黏性效果的空间）父元素相对定位，子元素绝对定位，常用于实现子元素重叠在父元素上。
CSS中的绝对布局
海涛高软
10-03 843
最后效果如下： 元素3 被设置成绝对定位，代码如下：一定要注意，局对定位的元素是相对于父节点而言被设置成绝对定位的元素会被流完全忽视，并且绝对定位的元素的边界不会影响其它块元素中包含的内联元素的流向FR：徐海涛（Hunk Xu)
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr.小朱同学

随心赞赏，助力前行

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值