Css position属性absolute和relative属性值的区别

最新推荐文章于 2022-12-30 17:25:00 发布
最新推荐文章于 2022-12-30 17:25:00 发布
阅读量170 收藏
点赞数
分类专栏： Css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43900414/article/details/113000016
版权
本文深入探讨了CSS中的absolute绝对定位和relative相对定位。absolute定位不占用原文档流空间，可能导致元素被下方内容挤压；而relative定位则保持元素在文档流中的位置，即使没有高度支撑也不会被挤掉。理解这两种定位方式对于前端布局至关重要。
摘要由CSDN通过智能技术生成

absolute 绝对定位，相对于父级元素的 relative 定义，不占位定位，没有高度支撑会被下面元素挤掉
relative 相对定义，占位定位，没有高度支撑，也不会被下面元素挤掉

卿卿qing
关注
专栏目录
css position属性四个值：static、fixed、absolute和relative的区别和用法
mus-z的博客
02-10 661
参考：https://zhuanlan.zhihu.com/p/29207938 https://blog.csdn.net/tengliu6/article/details/52088743 1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 2、relative（相对定位）：生成相对定位的...
CSS position属性absolute relative等五个值的解释
12-13
《CSS position属性详解：absolute, relative及其他值》 在网页设计中，CSS（层叠样式表）的position属性是至关重要的，它决定了元素在页面上的布局方式。position属性有五个基本值：static、relative、absolute、...
CSS中position属性值relative与absolute区别
chhuma专栏
04-21 6676
背景：     在做网页设计时，需要定位HTML元素位置时，势必要使用到CSS样式position值relative、absolute。 样例： A B C D E 注：position值为relative的元素以其前面兄弟元素为参照，并且元素左上角坐标就是后面兄弟元素左上角坐标 A B
position的值，以及absolute和relative的区别
最新发布
My_Soul_的博客
12-30 1133
关于 relative 和 absolute 的区别，主要是它们的定位参照点不同。relative 元素的定位参照点是它在正常流中的位置，而 absolute 元素的定位参照点是最近的已定位父元素（如果没有已定位的父元素，则参照点是 initial containing block）。此外，absolute 元素会脱离正常文档流，而 relative 元素不会。
position：relative and absolute
Tomihao
12-27 1550
很多学习布局的同学，都卡在定位这块，难就难在相对定位与绝对定位的配合上，不知道他们两个之间具体有什么区别。         这节课虽然文字性的内容比较多，但是基本上每一句话都很重要，如果想学好，那就耐下心来仔细看，对教程中的每个假设都要自己验证，自己总结规律，如果自己懒的证明，那就记住本节最后的话就行了。 好，上课！ 提问：如果页面内某个元素没有设定position属性，那么他是
position中的absolute与relative的区别
weixin_43417682的博客
09-29 1592
Position（位置）属性值需要注意的地方 position的属性有： Absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位 Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动 Relative：相对定位，是相对于其原本的位置来定位的 Static：默认值，没有定位 Inherit：继承父元素的position值。 absolute和relative的区别 relative设置的div宽度和父类的div宽度相同，所以给
css position: absolute、relative详解
10-30
CSS中的position属性是用于控制HTML元素的定位类型，它有两个特别重要的值：absolute和relative。这两个值控制元素是否脱离正常的文档流，以及如何通过特定的属性来精确定位元素。下面是关于这两个定位属性的详细...
css position属性为absolute时其百分值的计算
12-14
- 当`position`为`absolute`时，包含块是最近的祖先元素，其`position`属性值不是`static`（即`fixed`、`absolute`、`relative`或`sticky`）的内边距区域的边缘（`padding-left` + `content` + `padding-right`）。...
关于CSS position属性值absolute,relative的解释.zip
01-04
本文件主要探讨了`position`属性的两个关键值：`relative`和`absolute`，这些知识点对于创建复杂的网页布局至关重要。 首先，我们来了解`position: relative;`。这个值表示元素是相对定位的。当一个元素的`position...
前端开发CSS的定位 postion元素:relative/absolute 的区别之终极揭秘
weixin_43752167的博客
06-04 950
postion元素:relative/absolute：* relative和absolute在css定位中是常用的属性。下面就来一探究竟relative和absolute的区别。以及在子父类情况下怎样用好定位？ 初始的代码如下 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset...
Css浮动元素外层容器高度为0(无高度)的解决方法
12-10
由于项目中使用ul+li的布局方式，在ie8、chrome浏览器中，包裹浮动的li元素的外层ul高度为0，ie7浏览器和ie8兼容模式显示正常，这是典型的浏览器兼容性问题。 解决办法： 第一种：设置ul的style属性 复制代码代码如下: overflow:hidden;//超出元素纬度范围的内容的可见性：隐藏 第二种：设置ul的style属性 复制代码代码如下: float:left; //浮动：左 第三种：在ul标记内加空div 复制代码代码如下: <div xss=removed>
css postion的两种属性学习 absolute 和 relative
yuj9006的专栏
11-29 671
Dialog - jQuery EasyUI Demo body{ margin:0px; border:4px blue dotted; height:600px; } #wrap{ width:500px; background-color: red; height:auto; } #column1{ position:absolute; top:0px
absolute与reactive的区别
JYB2106056288的博客
05-26 349
这个在网上一搜一大把，本来是不想写的，但是在练demode时候忘记了一些细节，所以决定记录一下： 从定位依照来说： absolute是根据第一个非static定位的父元素来定位，若无，则根据视图窗口进行定位。 reactive则是根据自身位置进行定位。 从是否保留原位置来说： absolute是不保留原位置的，会改变后续元素的布局，也就是脱离标准流。 reactive则是保留原位置。 他们都由一个共同点——在定位后，若目标位置有标准元素，则会遮挡住标准元素。 ...
啥时候需要用position：relative和position：absolute这2个属性
1
08-14 1213
  &lt;div id='wrapper'&gt;I’m wrapper!&lt;div id='content'&gt;right,top&lt;/div&gt;&lt;/div&gt; &lt;style type="text/css"&gt; #wrapper { position:relative; width:400px; height:300px; background:#cc...
关于定位的几种用法
fu2021_10_14的博客
02-27 646
1.relative 相对定位 ，相对自身原来位置，原有空间保留，不会被挤占。宽度为父元素宽度，且宽度会撑大/缩小父元素宽度 2.fixed 固定定位， 实现某个元素在可视窗口的居中位置显示 　　　　1）给自身设置宽高； 　　　　2）给自身加position：fixed； 　　　　3）用margin向左移动自身宽度的一半，向上移动自身高度的一半； 3.absolute 绝对定位 脱离文档流 寻找父级是否有相对定位 如果有 根据父级定位 如果没有找到会忘记父级的父级寻找 直到浏览器才会根据浏览..
relative 和absolute
gong1422425666的博客
08-28 269
relative 和absolute 的父元素可以是relative或是absolute relative是相对于当前位置进行位置的改变，并且是占据位置的； 而absolute是相对于父元素的位置进行改变，如果不设置left 等其他的还是会是在原来的位置上，但是是不占据空间的；
CSS 相对|绝对(relative/absolute)定位
油墨香^-^的博客
05-15 1321
一、absolute属性的情感化认识 我对position:absolute属性感性化的认识：absolute是一个善良的有个性的，我行我素、喜欢凌驾一切之上的魔鬼。这家伙，不喜欢也算不上讨厌，但是知道没事最好少招惹，免有后患。 二、position:absolute与float:left是近亲 先给大家讲个故事吧。曾经有两个魔鬼兄弟，一个叫浮动，一个叫绝对定位，它们总是一起在空中飞行戏耍的。但是，不幸的是，有一天，浮动被巨雷击中，双翼折损，陨落凡间，好在性命还在，但是，翅膀不在，它只能永远留在凡..
relative，absolute，fixed的区别及具体用法
HouYing
10-12 640
relative、absolute、fixed这三个属性值有一个共同点，都是相对于某个基点的定位，不同之处仅仅在于基点不同。所以，只要理解了它们的基点是什么，就很容易掌握这三个属性值。这三种定位都不会对其他元素的位置产生影响，因此元素之间可能产生重叠。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值