13.①定位（静态定位、相对定位relative、绝对定位absolute、固定定位fixed、粘性定位position:sticky；top:10px；）、②定位和浮动的区别、③页面布局总结

最新推荐文章于 2025-05-17 10:21:20 发布
原创 最新推荐文章于 2025-05-17 10:21:20 发布 · 366 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文主要介绍了网页布局中常用的定位方式及其与浮动的区别，并对不同场景下的页面布局进行了总结，适合前端开发者阅读。
CSS之定位：边偏移 静态定位static 相对定位 relative 绝对定位 absolute 固定定位 fixed 粘性定位sticky，子绝父相的由来,绝对定位的盒子居中, 堆叠顺序
qq_44156869的博客
02-18 2008
为什么需要定位？ 某一个盒子可以自由的在一个盒子内移动位置，并且压住其他盒子。 当我们滚动窗口的时候，盒子的是固定屏幕的某个位置的。 为什么需要定位 以上效果，标准流或者浮动都无法实现，此时需要定位来实现。 所以： 浮动可以让多个盒子一行没有缝隙排列显示，经常用于横向排列盒子。 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。 定位组成： 定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。 定位 = 定位模式 +边偏移。 定位模式
CSS position属性absolute relative等五个值的解释
12-13
position属性有五个基本值：static、relative、absolute、fixed以及sticky，每个值都有其独特的应用场景。 1. **static**（静态定位） 静态定位是元素的默认定位方式。元素按照正常的文档流顺序排列，不考虑top、...
相对定位、绝对定位、固定定位、粘滞定位、静态定位的参照和区别
qq_42822993的博客
09-26 438
相对定位、绝对定位、固定定位、粘滞定位、静态定位的参照和区别 定位类型 参考点 是否脱离文档流 相对定位 相对原先自己的位置 不脱离 绝对定位 相对具有定位属性的上层元素 脱离 固定定位 相对浏览器窗口定位 脱离 粘滞定位 相对定位+固定定位组合，有临界值 脱离 ...
定位：相对，绝对，固定，静态，粘性
OvO的博客
06-16 223
定位：相对定位：relative 绝对定位：absolute 固定定位：fix 静态定位：把定位去掉static 粘性定位：staicy
CSS之定位（很用心全面的总结）
m0_51300418的博客
10-11 242
为什么需要定位？ 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子。 一、定位组成 定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。 定位 = 定位模式 + 边偏移 定位模式用于指定一个元素在文档中的定位方式。 边偏移则决定了该元素的最终位置 1.定位模式 值 语义 static； 静态定位 relative; 相对定位 absolute
CSS-静态定位，相对定位，绝对定位，固定定位的用法和区别详解
weixin_44486539的博客
10-05 2225
CSS 提供了三种基本的定位机制：普通流、浮动和定位；通过这三种方式可实现页面的排版布局 普通流 普通流中的元素的位置由元素在 (X)HTML 中的位置决定 块级元素独自占一行，在文本流中从上到下一个接一个地排列 行内元素在一行中并排排列，遇到父元素的边沿会换行继续排列 浮动 浮动会让元素脱离标准文档流，不再占原来的空间，可以让多个块级元素并排显示 定位 定位是将元素定在某个位置，...
position:relative 的深入理解，欢迎探讨
mixer_a的专栏
05-25 410
对于css中的position:relative;我始终搞不明白它是什么意思，有什么作用？ 对于position的其它几个属性，我都搞懂了 引用 static : 　无特殊定位，对象遵循HTML定位规则 absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边...
CSS position属性详解：absolute, relative与fixed定位
5. `sticky`（粘性定位）：这是一种介于`relative`和`fixed`之间的定位方式。元素在屏幕滚动到指定位置前保持其正常位置，一旦超过这个位置，它将固定在屏幕上。这个特性在创建滚动效果时很有用。 以下是一个`...
CSS position属性详解：绝对定位与相对定位
CSS中的`position`属性用于定义元素在页面上的定位方式，它有五个基本值：static、relative、absolute、fixed和 sticky。在所有现代浏览器中，`position`属性得到广泛支持，但`inherit`值在某些旧版IE浏览器中可能不...
CSS定位详解：从静态到绝对，全面掌握五种定位方式
定位有五个主要的定位模式：静态定位（static）、绝对定位（absolute）、相对定位（relative）、固定定位（fixed）和粘性定位（sticky）。理解这些定位方式有助于创建响应式设计和优化用户体验。 1. **静态定位...
CSS 静态定位、相对定位、绝对定位、固定定位、粘性定位、定位的叠放次序以及定位的拓展
蟹黄堡
05-14 737
定位简介 定义：将盒子定在某一个位置。 作用：定位可以让盒子自由在某个盒子内移动位置或者固定在屏幕中的某个位置，并且可以按住其他盒子。 定位= 定位模式 + 边偏移。其中，定位模式用于指定一个元素在文档中的定位方式。边偏移则决定该元素的最终位置。 定位模式 定位模式决定元素的定位方式，它通过CSS的position属性来设置，其属性值取值见下表： 属性值 说明 static 静态定位 relative 相对定位 absolute 绝对定位 fixed 固定定位 sti
CSS定位（相对定位，绝对定位，固定定位，粘性定位，子绝父相）
laisy334514的博客
08-12 628
定位 = 定位模式 + 边偏移 1.模式 position : static （静态） | relative （相对） | absolute （绝对） | fixed （固定） 2.边偏移 top | bottom | left | right 1.静态定位static 默认定位方式，无定位的意思 2.相对定位relative 相对于它原来的位置进行偏移 特点：原来在标准流中的位置继续占有（不脱标） 未加定位： ...
CSS 元素的定位之相对定位 position: relative
歪脖先生的博客
02-21 1万+
定位在CSS中，通过 position属性来对元素进行定位，可选的定位类型有 static | relative | absolute | fixed，默认值为 static，表示没有定位，元素保持在它原本应该在的位置上。要对页面元素使用定位技术，必须 position属性设置为 static 之外的其它 3 个属性值，即相对定位、绝对定位、固定定位。相对定位当一个元素的 position属性设置...
神奇的position:relative;
weixin_34408717的博客
07-17 342
我承认我又标题党了，这里想说的是相对定位的设置有时候会起决定性的作用，比如在是否随滚动条移动时的控制。 先上两个示例： position:static; .parent{ display:block; /*position:relative;*/ width:200px; height:100px; overflow:auto; background:lightblue; } .pa...
position:relative
kingisking1的专栏
09-17 589
#A{ positon:relative}#B{ positon:absolute; top:5px; left:5px;}   /*这里定位时还可以用right和buttom*/这时B的位置就是相对于A的位置了
position：relative
热门推荐
weixin_44874595的博客
07-30 5万+
1.当将块的position属性设置为relative时，与设置为absolute完全不同，这时子块是相对于其父块来作为参照对象偏移定位，而不是相对于浏览器窗口，并且相对定位的块元素脱离标准流浮上来后，无论是否进行移动，其所占的位置仍然留有空位，后面的无定位块元素不会移动上来，因此，移动元素会导致覆盖其它框。 <!DOCTYPE html> <html lang="en">...
position各种
u010985901的专栏
08-21 175
[code="java"] position的默认值是static，（也就是说对于任意一个元素，如果没有定义它的position属性，那么它的position:static） 如果你想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方，应该给#demo相对定位，#sub绝对定位。 absolute是相对于自己最近的父元素来定位的，如果你不给#demo相对...
position之relative
lbs311709000127的博客
01-18 6756
position：relative 作用：是元素成为containing-block，可定位的祖先元素。意思就是绝对定位是的参照元素 特点： 可以使用top|right|bottom|left|z-index进行相对定位，相对的是常规流中自己的位置。 相对定位元素不会离开常规流，意思就是其原来的位置还在，不会被其他后面的元素占有 任何元素都可以设置为relative，...
CSS- 4.2 相对定位（position: relative）
最新发布
HRDMN的博客
05-17 1499
本文讲述相对定位（position: relative）是CSS定位属性中的一种，它允许元素相对于其正常文档流中的位置进行偏移，同时保留其在文档流中的原始空间。相对定位的元素会保留原始空间，位置只是相对于自身的偏移，且不影响其他元素。下面跟小编开始今日的练习吧！
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值