CSS关于position:absolute

最新推荐文章于 2025-05-18 10:42:35 发布
最新推荐文章于 2025-05-18 10:42:35 发布
阅读量273 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/acaciasun/p/3337390.html
本文深入解析CSS中绝对定位(position:absolute;)的使用技巧，详细说明了如何通过设置bottom属性来精确控制元素在页面滚动时的位置，确保元素在浏览器窗口中的显示效果不受页面高度变化的影响。

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

position:absolute;
bottom:x px;

x是页面滚动条在最上面时，元素下边界（包括margin）距浏览器窗口最下面的距离；

页面滚动时，元素在整个页面中的相对位置不变；

浏览器窗口的高度变化时，元素在页面中的相对位置会改变，但是元素下边界（包括margin）距浏览器窗口最下面的距离始终为x。

转载于:https://www.cnblogs.com/acaciasun/p/3337390.html

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 1793
本文介绍了绝对定位（position: absolute），完成了一个学校官网导航栏实例。绝对定位是CSS中一种强大的定位方式，它允许元素脱离正常的文档流，相对于其最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块（通常是视口）定位。大家记得勤练习！
CSS属性详解——position:absolute
Wod_7的博客
06-04 1万+
绝对定位absolute定位是CSS中的一种定位方式，可以将元素精确定位到一个确定的点，这与元素在文档流上的自然位置无关。相比起其他定位方式，绝对定位很灵活性，它可以将元素脱离文档流，使得元素的位置不受页面上其他元素的影响。相应地，元素独立悬浮于页面上。
CSS定位—position：absolute
weixin_30649641的博客
07-27 221
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:fixed实现div居中上下左右居中
09-25
本篇文章主要探讨了如何利用CSS属性position:fixed来实现DIV的绝对居中。 首先，了解position:fixed属性的作用是关键。position:fixed表示元素相对于浏览器窗口进行定位，这意味着无论页面如何滚动，元素都将保持在...
CSS中的position:relative;的作用示例介绍
12-10
在CSS布局中，`position`属性是一个至关重要的概念，它决定了元素如何在页面上定位。在你的问题中，你特别关注了`position:relative;`的作用，这是一个基础且实用的定位方式。下面我会详细解释`position:relative;`...
[CSS] position：absolute
qq_41700921的博客
04-04 706
position：absolute 使元素脱离文档流
css positions 属性 absolute
帅的博客
12-17 2766
position: absolute absolute(绝对定位)是指给元素设置绝对的定位，相对定位的对象可以分为两种情况： 1) 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。 2) 如果并没有设置了position属性的祖先元素，则此时相对于body进行定位。 具体使用方法: 给标签添加class， 然后样式里面先写position: absolute; 然后通过top,bo
CSS绝对定位（absolute）、相对定位（relative）方法（详解）
csgojingyu的博客
10-21 2万+
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
CSS进阶（13）—— position:absolute如此高深，我当真不懂（中）
热门推荐
我不是水哥
12-10 2万+
在上文中，我们探讨了绝对定位的包含块以及“无依赖绝对定位”的特性，本章我们来聊聊absolute的流体特性以及那些和absolute关系甚好的CSS属性。 1.absolute的流体特性 在前面一文中，我们测试了很多“无依赖绝对定位”的特殊表现，事实上在平时开发的时候我们使用absolute都用的都是他的“绝对定位”特性，这也是absolute被设计出来的本职工作。为了做好自己的本职工...
css深入浅出系列之：绝对定位 position:absolute
qq_43693520的博客
03-09 1682
css深入浅出系列只是自己在学习css的时候的一些个人见解，有错误的地方，欢迎在评论中指正噢~ 今天主要在以下几个方面来展开： 1、什么是绝对定位 2、如何确定绝对定位元素的定位点 3、absolute与relative的联系 1、什么是绝对定位 首先引用一句w3school关于绝对定位的原话：绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包...
css中position：absolute详细介绍
qq_44883318的博客
10-04 1457
定义： 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。这些属性是相对于HTML标签
怕忘记了CSS中position的absolute和relative用法
dht89998的博客
06-25 280
CSS2.0中的定位确实有时会把人弄糊涂，所以今天给它记下来，同时供以后查阅。下面写的内容有一部分借鉴了w3cschool和divcss5这两个官方网站，在此处特别的说明一下 CSS2.0中position主要用于HTML元素的定位，在实际设计中还是非常有用的。但是对于学习者来说都会遇到相对定位和绝对定位到底如何使用，非常打脑壳 不管再咋个打脑壳，大家首要的还是记住position的...
position：absolute与position：relative
weixin_30270889的博客
01-29 618
position的默认属性值均是static，静态。 【position:absolute】定位为absolute的层脱离正常文本流，但其在正常流中的位置不再存在。 大多数人可能会觉得absolute绝对定位是根据浏览器窗口定位，实则不是。absolute定位是相对于父元素的绝对定位，且父元素必须有position：absolute或者position：relative；若其父元素没有，则逐层...
css position absolute
bestmover的博客
03-28 170
<html> <style> *{ border: 0; margin: 0; } </style> <header></header> <body > <div style="backgro
css：position: absolute
01-24
### CSS `position: absolute` 使用详解 #### 定义与作用 `position: absolute` 是一种定位模式，使得元素脱离标准文档流。这意味着该元素不再占据空间，并可以相对于最近的已定位祖先元素进行放置[^1]。 #### ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值