[CSS] position：absolute

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

#css

博客介绍了CSS里position:absolute的特性，它能让元素脱离文档流，这是前端开发中关于CSS布局的重要知识点。

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

position：absolute

使元素脱离文档流

CSS 绝对定位 position:absolute、z-index 设置堆叠顺序
小楼一夜听春雨，深巷明朝卖杏花
03-18 4080
绝对定位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 1786
本文介绍了绝对定位（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 1570
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详解
kuxingseng123的博客
03-08 2169
慢慢的将各个知识点都研究一下
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`）祖先元素进行定位[^4]。如果没有找到符合条件的祖先元素，则该元素将相对于初始包含块（通常是 `<html>` 元素）进行定位。 #### 关键特性 - **脱离文档流**：设置了 `position: absolute` 的元素不再占据原来的空间，其他元素会像它不存在一样重新排列[^1]。 - **相对定位**：绝对定位的元素会基于其最近的具有 `position` 属性（除了 `static` 外）的父容器进行偏移计算[^2]。 - **堆叠上下文**：可以通过 `z-index` 来调整这些绝对定位元素之间的层叠顺序。 #### 实际应用案例 以下是几个常见的应用场景及其对应的实现代码： ##### 场景一：创建悬浮菜单 ```css .menu { position: absolute; top: 50px; /* 距离顶部的距离 */ left: 20px; /* 距离左侧的距离 */ background-color: white; border: 1px solid black; } ``` ##### 场景二：固定对话框于屏幕中央 为了使对话框居中显示，可以结合百分比和负边距来完成： ```css .dialog-box { position: absolute; width: 300px; height: 200px; top: 50%; left: 50%; margin-top: -100px; /* 高度的一半 */ margin-left: -150px; /* 宽度的一半 */ background-color: lightblue; text-align: center; padding: 20px; } ``` ##### 场景三：图片轮播中的指示器 通常情况下，指示器会被放置在图片底部中间位置： ```css .indicator { position: absolute; bottom: 10px; /* 距离底部距离 */ left: 50%; /* 水平中心对齐 */ transform: translateX(-50%); /* 更精准地水平居中 */ } ``` #### 注意事项 - 如果希望子元素按照某个特定区域内的坐标系移动，那么需要确保这个区域内至少有一个带有 `position` (如 `relative`, `absolute`) 的父级标签。 - 当存在多个重叠的绝对定位对象时，可通过调节各自的 `z-index` 数值决定谁覆盖在上方。 - 不要忘记考虑响应式设计需求，在不同分辨率下可能需要动态调整某些参数以保持良好的视觉效果[^5]。 ### 总结 综上所述，掌握好如何运用 `position: absolute` 可以为我们带来极大的便利性，尤其是在构建复杂交互界面的时候更是不可或缺的一部分。不过也要注意合理规划层级关系以及兼容性测试等问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值