css中的绝对定位（absolute）

最新推荐文章于 2023-10-21 09:42:12 发布
最新推荐文章于 2023-10-21 09:42:12 发布
阅读量165 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/pj1653_9/article/details/105770212
版权
探讨了CSS中绝对定位元素如何从文档流中移除，及其对页面布局的影响。解释了通过设置top和left属性来精确控制元素位置的方法。

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

设置为绝对定位的元素框从文档流完全删除，元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
个人理解为如果给该元素定位为绝对定位，该元素就会脱离文档，如：
在这里插入图片描述
效果为这样
在这里插入图片描述
并不是想要效果，个人解决方法是设置css中的top和left值，指定特定位置
在这里插入图片描述
在这里插入图片描述

pj1653_9
关注
一文读懂css【css3】绝对（absolute）定位和相对（relative）定位 相对定位是相对谁定位的 绝对定位又是根据谁绝对定位的 子绝父相 包含块
念兮为美
07-31 6209
我们在开发的过程中，经常会使用到相对定位和绝对定位，但我们有时对这两个定位不是很熟悉，往往会弄混，分不清什么是相对定位，什么又是绝对定位。那么，这篇文章便详细解说他们的区别。相对定位是元素相对其起始位置的定位，那么什么是起始位置呢？绝对定位是相对包含块来定位的，那么，那么什么又是包含块？我们清楚，绝对定位有子绝父相这个词，那么，它是什么意思呢？这里的所有疑问，都会在这篇文章中，讲的非常清楚...
CSS:absolute绝对定位
GeXueliu的博客
04-09 720
position:absolute
CSS 绝对定位
taobaohs的专栏
08-13 137
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 CSS 绝对定位 绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素...
css之absolute
weixin_39037804的博客
09-14 411
一、absolute和float有相同的特性，包裹性和破坏性 1、absolute和float的相似(看下面的demo，如果图片在左上角，那么用float和absolute都一样) 1 <!docty...
CSS学习20：absolute（绝对定位）
玉安_ZhangDe的博客
04-09 6914
绝对定位的介绍： 绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。 语法： 选择器 { position: absolute; } 1、完全脱标 —— 完全不占位置； 2、父元素没有定位，则以浏览器为准定位（Document 文档）。 3、父元素要有定位 i.元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。 ii.绝对定位的特点总结：（务必记住）...
css之absolute的相关知识
菜鸟一名
03-02 870
css中position有个值是absolute, 功能非常强大，用来进行定位能做到许多奇妙的效果，下面就介绍一下absolute 当使用了absolute之后，元素就会脱离文本流，什么意思？看下面的代码和图来理解 这是源码 效果如下图所示：                 可以看到，3个div都是正常的显示，这时如果第二个div使用了position
css中定位中的absolute和relative是什么意思
01-19
absolute是指绝对定位，即将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位，而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。 ralative是指相对定位，就是依据left，...
css 相对定位 绝对定位 浮动 分析
09-25
本篇文章将深入探讨相对定位、绝对定位以及浮动的概念，这些都是网页设计中不可或缺的技能。 **相对定位（Relative Positioning）** 相对定位是CSS定位的基础，它允许元素在不改变其在正常文档流中的位置的情况下...
CSS中关于绝对定位和相对定位
01-08
body {margin: 30px; font-size:9pt;} .a, .b, .c, .d, .e {  width: 100px;  height: 100px;  margin: 5 auto;  color: #fff;  background: #000; } .aa, .bb, .cc, .dd, .ee {  top: 10px;...{positi
CSS绝对定位（absolute）、相对定位（relative）方法（详解）
最新发布
csgojingyu的博客
10-21 2万+
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
CSS 绝对定位属性absolute用法初探
appteam_vlctech的专栏
06-13 897
CSS 绝对定位的用法你是否熟悉，这里和大家分享一下CSS 绝对定位的属性absolute，希望对你的学习有所帮助。 CSS absolute属性 设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
CSS绝对定位absolute详解
嘿嘿
01-16 2万+
之前介绍过CSS浮动float详解，本篇介绍的绝对定位absolute和浮动float有部分相似性。如果能理解浮动float，对理解绝对定位absolute会大有帮助。 先说absolute和float的相似处：包裹性 和 高度欺骗 包裹性 所谓一图胜千言（唯一的区别是：下图的div增加了absolute） <div style="border:4px solid blu...
CSS属性之absolute
u011927449的博客
05-15 622
0.脱离标准文档流 绝对定位的元素会脱离标准文档流，拥有z-index属性，并且对于它的任何操作和改变都不会影响它的兄弟元素和父级元素，这里就不过多介绍。 不过值得注意的是，虽然绝对定位元素脱离的标准文档流，但是它依然会受到父元素影响哦，比如line-height和text-align属性等。 1.跟随性 绝对定位的元素脱离标准文档流之后，并不是跑到了任意的位置，而是跟在前一个没有添加absolute或者fixed值的元素后面或者下面。 不过在设置了left/top/bottom/right这些值之后，它相
css中absolute定位原理
bwf_erg的博客
04-10 836
position的四个值：static、relative、absolute、fixed。 绝对定位：absolute和fixed统称为绝对定位 相对定位：relative 默认值：static 绝对定位的定位原理： 1.在父元素没有设置相对定位或绝对定位的时候，元素相对于根元素html元素进行绝对定位。 这里我们设置3个div，第3个div设置为绝对定位。并设置偏移量 运行结
CSS的绝对定位absolute
李昆鹏的博客
05-11 462
-----------------------------CSS的绝对定位absolute---------------------------绝对定位设置绝对定位的元素从文档流中完全删除，以浏览器的左上角为相对位置，设置水平位置和垂直的位置。代码示例：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-...
CSS深入理解之absolute
码飞_CC的博客
11-14 979
CSS深入理解之absolute
css中absolute和relative的问题
xuchuanliang11的博客
10-12 566
position的值，relative和absolute分别是相对谁进行定位：absolute 生成绝对定位的元素，相对于static定位以外的第一个祖先元素进行定位；relative 生成相对定位的元素，相对于其在普通流中的位置进行定位 详细解释一： absolute在子div，他的父元素必须有个position属性默认不是static的，这样它就可以以父类为参照进行定位 rela...
CSS-absolute详解（慕课网）
eva_lu的博客
08-02 1492
（本文参考慕课网视频教程CSS-position 并加以总结） 一、absolute与float，relative的关系 注： absolute和float不能同时存在，对float元素添加absolute会去除浮动；对absolute元素使用float无效。 relative和absolute不是兄弟关系，是对立的分离的，absolute离开relative使用会更加强大 独立的...
css中绝对定位和相对定位
09-11
在CSS中，绝对定位和相对定位是两种常用的定位方式。 绝对定位（absolute）是指元素从文档流中脱离出来，并相对于其最近的已定位的祖先元素进行定位。通过设置left、right、top和bottom属性，我们可以决定元素相对于其祖先元素的位置。绝对定位的元素不会对其他元素产生影响，也不会被其他元素所覆盖。 相对定位（relative）是指元素保持在文档流中的位置，但可以通过设置left、right、top和bottom属性来相对于其正常位置进行微调。相对定位的元素仍然会占据原来的空间，并对其他元素产生影响。 举个例子，如果我们有一个元素的id为"box_relative"，我们可以通过以下CSS代码将其设置为绝对定位： ```css #box_relative { position: absolute; left: 30px; top: 20px; } ``` 这样，元素"box_relative"会相对于其最近的已定位的祖先元素进行定位，并且相对于祖先元素的左边缘偏移30像素，上边缘偏移20像素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值