[CSS] position：absolute

最新推荐文章于 2025-05-18 10:42:35 发布
最新推荐文章于 2025-05-18 10:42:35 发布
阅读量706 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41700921/article/details/89031192
博客介绍了CSS里position:absolute的特性，它能让元素脱离文档流，这是前端开发中关于CSS布局的重要知识点。

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

position：absolute

使元素脱离文档流

CSS 绝对定位 position:absolute、z-index 设置堆叠顺序
小楼一夜听春雨，深巷明朝卖杏花
03-18 4079
绝对定位absolute定位是CSS中的一种定位方式，可以将元素精确定位到一个确定的点，这与元素在文档流上的自然位置无关。相比起其他定位方式，绝对定位很灵活性，它可以将元素脱离文档流，使得元素的位置不受页面上其他元素的影响。相应地，元素独立悬浮于页面上。
CSS position: absolute 绝对定位精讲
DevilPace的博客
07-14 1万+
绝对定位基本特征 绝对定位的第一个特征在于会从文档流中脱离，不受其他元素影响，定位是“绝对”的，所以称之为绝对定位，如果是相对定位，会受其他元素影响，则定位是“相对”的； 未使用定位：即元素在正常文档流当中 .frame { margin: 0 auto; margin-top: 50px;
CSS position绝对定位absolute relative
the_owl的专栏
05-16 1092
CSS position绝对定位absolute relative DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位，比如我们让一个层位于一个层内具体什么位置，为即可使用position:absolute和position:relative实现。 一、position语法与结构 position语法：  p
CSS- 4.3 绝对定位（position: absolute）&学校官网导航栏实例
最新发布
HRDMN的博客
05-18 1784
本文介绍了绝对定位（position: absolute），完成了一个学校官网导航栏实例。绝对定位是CSS中一种强大的定位方式，它允许元素脱离正常的文档流，相对于其最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块（通常是视口）定位。大家记得勤练习！
CSS属性详解——position:absolute
Wod_7的博客
06-04 1万+
绝对定位absolute定位是CSS中的一种定位方式，可以将元素精确定位到一个确定的点，这与元素在文档流上的自然位置无关。相比起其他定位方式，绝对定位很灵活性，它可以将元素脱离文档流，使得元素的位置不受页面上其他元素的影响。相应地，元素独立悬浮于页面上。
CSS定位—position：absolute
weixin_30649641的博客
07-27 220
position：absolute 　　绝对定位 　　脱离文档流，原有位置空间被释放。容器（父）元素将得不到脱离普通流的子元素的高度 　　不管是块级元素还是行内元素，应用了position:absolute之后，display为block，可以设置width和height，没有设置的话，width默认为auto 1、父元素或祖元素没有设置position：absolute、relative...
css position: absolute、relative详解
10-30
总结来说，position: absolute和position: relative是CSS中用于控制元素定位的两个重要属性。absolute让元素完全脱离文档流并相对于最近的已定位祖先元素（或者初始包含块）进行定位，而relative则让元素保持在文档...
CSS position:absolute全面了解
09-24
在CSS布局中，`position:absolute`是一个重要的属性，它允许元素相对于最近的非静态定位祖先元素（如果存在）或初始包含块（通常是浏览器窗口）进行定位。本篇将全面探讨`position:absolute`的特征、用法及其对布局...
CSS中的position:relative;的作用示例介绍
12-10
在CSS布局中，`position`属性是一个至关重要的概念，它决定了元素如何在页面上定位。在你的问题中，你特别关注了`position:relative;`的作用，这是一个基础且实用的定位方式。下面我会详细解释`position:relative;`...
position属性absolute与relative 详解
weixin_34352005的博客
07-15 2465
最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记。一.解读absolute与relative http://www.blueidea.com/tech/web/2006/4249.asp很多朋友问过我absolute与relative怎么区分，怎么用？我们都知道absolute是绝对定位，r...
CSS绝对定位（absolute）、相对定位（relative）方法（详解）
csgojingyu的博客
10-21 2万+
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
position:absolute
banchengp的博客
11-16 1568
1、float与absolute 当float和absolute同时存在的时候，float时么有任何效果的，所以没有必要同时启用float和absolute 两个具有相似性，相似点包括 块状化和浮动类似，直接把元素display表现成block或者是table 破坏性，破坏正常的流的持续性。 块状格式化上下文 BFC 包裹性，元素不会自动填充，而是由内容撑起来的 所以没...
css positions 属性 absolute
帅的博客
12-17 2765
position: absolute absolute(绝对定位)是指给元素设置绝对的定位，相对定位的对象可以分为两种情况： 1) 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。 2) 如果并没有设置了position属性的祖先元素，则此时相对于body进行定位。 具体使用方法: 给标签添加class， 然后样式里面先写position: absolute; 然后通过top,bo
CSS进阶（13）—— position:absolute如此高深，我当真不懂（中）
我不是水哥
12-10 2万+
在上文中，我们探讨了绝对定位的包含块以及“无依赖绝对定位”的特性，本章我们来聊聊absolute的流体特性以及那些和absolute关系甚好的CSS属性。 1.absolute的流体特性 在前面一文中，我们测试了很多“无依赖绝对定位”的特殊表现，事实上在平时开发的时候我们使用absolute都用的都是他的“绝对定位”特性，这也是absolute被设计出来的本职工作。为了做好自己的本职工...
CSS 绝对定位
taobaohs的专栏
08-13 143
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 CSS 绝对定位 绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素...
position:absolute详解
热门推荐
xiaobing_hope的专栏
12-13 11万+
position：absolute日常开发中经常涉及元素的定位，我们都知道，绝对定位相对于最近position不为static的父级元素来定位，但其中定位的位置还是有细微的差别的。绝对定位根据left和top属性来规定绝对定位元素的位置。 但这个位置实际上与padding和父级相对定位的box-sizing有关的。* 默认盒子的box-sizing为content-box（即盒子所占据的宽度=wi
CSS关于position:absolute
weixin_30235225的博客
07-27 273
position:absolute; bottom:x px; x是页面滚动条在最上面时，元素下边界（包括margin）距浏览器窗口最下面的距离； 页面滚动时，元素在整个页面中的相对位置不变； 浏览器窗口的高度变化时，元素在页面中的相对位置会改变，但是元素下边界（包括margin）距浏览器窗口最下面的距离始终为x。 转载于:https://www.cnblogs.com/acaci...
css position: absolute;
04-03
### CSS 中 `position: absolute` 的使用方法 #### 基本概念 在 CSS 中，`position: absolute` 是一种重要的定位方式。当元素被设置为 `absolute` 定位时，它会脱离正常的文档流，并根据其最近的已定位（非 `static...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值