absolute与relative

最新推荐文章于 2022-11-23 16:24:04 发布
最新推荐文章于 2022-11-23 16:24:04 发布
阅读量294 收藏
点赞数
分类专栏： css 文章标签： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aiyoquickly/article/details/51534720
版权

绝对定位与相对定位

relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。
absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

aiyoquickly
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css定位，relative和absolute的结合使用
mysevenyear的博客
05-15 4363
1、单独使用：relative：相对于本身偏移，没有脱离文档流。absolute：相对于浏览器定位，脱离了文档流，也就是不占位置。在没有设定TRBL值时是根据父级对象的坐标作为始点的，当设定TRBL值后则根据浏览器的左上角作为原始点，如下：（没有设置TRBL） <style> body{ margin: 0; pad...
Absolute（绝对定位）与relative（相对定位）的图文讲解
热门推荐
weixin_42067967的博客
04-30 9万+
Position的属性值有：1.     Absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位2.     Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。3.     Relative：相对定位，是相对于其原本的位置来定位的。4.     Static：默认值，没有定位。5.     Inherit：继承父元素的position值。对于初...
一文读懂css【css3】绝对（absolute）定位和相对（relative）定位 相对定位是相对谁定位的 绝对定位又是根据谁绝对定位的 子绝父相 包含块
念兮为美
07-31 5363
我们在开发的过程中，经常会使用到相对定位和绝对定位，但我们有时对这两个定位不是很熟悉，往往会弄混，分不清什么是相对定位，什么又是绝对定位。那么，这篇文章便详细解说他们的区别。相对定位是元素相对其起始位置的定位，那么什么是起始位置呢？绝对定位是相对包含块来定位的，那么，那么什么又是包含块？我们清楚，绝对定位有子绝父相这个词，那么，它是什么意思呢？这里的所有疑问，都会在这篇文章中，讲的非常清楚...
CSS绝对定位（absolute）、相对定位（relative）方法（详解）
Z_CH8648的博客
11-23 3万+
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。 position 属性指定了元素的定位类型，用于指定一个元素在文档中的定位方式。
absolute和relative的区别
m0_47843571的博客
10-19 5601
1,文档流不同 elative 不脱离文档流，absolute 脱离文档流。` 2,分级不同 1，elative 参考自身静态位置通过 top(上),bottom（下）,left（左）,right（右） 定位，并且可以通过z-index进行层次分级。 2，absolute通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。 3，定位不
决定定位和相对定位的区别
gao_zhennan的博客
03-31 1238
前言：学过的好多知识经常是当时学会了、理解了，但是过一段时间不使用就会差不多忘记了，又要花费时间去重复学习。为了避免或者减少重复学习学过的知识，因此对学过的东西进行总结。本文基于“Absolute（绝对定位）与relative（相对定位）"展开，做出了部分修改和补充。 Position的属性值有： 1.     Absolute：绝对定位，是相对于
Div CSS absolute与relative的区别小结
10-30
Div + CSS 进行网页布局，适当地运用 absolute 与 relative，能给布局带来意想不到的效果和方便，达到事半功倍…本文介绍了关于 absolute 与 relative 的运用。
关于CSS absolute与relative不得不说的话
09-22
下面小编就为大家带来一篇关于CSS absolute与relative不得不说的话。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
li标签的position:absolute与relative案例应用
09-25
本案例中涉及到的是`position`属性的两个值：`relative`和`absolute`，它们在li标签的应用中起到了决定性的作用。 首先，我们来看`position: relative;`。当一个元素的`position`属性设置为`relative`时，它会相...
CSS中的position 的值： absolute 与 relative
04-12
`position`属性有多个可选值，其中`absolute`和`relative`是两个最常使用的值，它们在网页设计中扮演着关键角色。 **一、position: static** 这是所有元素的默认定位方式。`static`定位遵循正常的文档流，即元素会...
浅谈 relative 与 absolute
weixin_45815411的博客
04-15 514
浅谈 relative 与 absolute relative 与 absolute 属于 position 中的属性，positon除了这两种属性外，还有另外两种属性分别是 static 和 fixed。此处我们暂且不谈后两种属性，来谈谈 relative 与 absolute，让我们现在开始吧！ absolute absolute 顾名思义在英文中可译为绝对的，它在CSS中所表现的属性也是如此称为绝对定位； 格式如下： position:absolute; 好了，现在让我们来讲讲它的具体表
CSS+DIV布局中absolute和relative区别
蓝天白云
04-03 4281
原文： http://developer.51cto.com/art/201009/225201.htm
关于css的absolute和relative的问题理解
小雨学习记录
12-13 453
在网页的界面中进行层叠样式表格式化输出标签的位置的时候，会用到position这个标签。在使用此标签的时候总会被absolute和relative这两个布局搞晕，普遍的使用的时候通过其中文的翻译可以大体得知： absolute：绝对 relative：相对 但是对于灵活使用absolute和relative的布局的时候，总要搞混。根据实际经验，我对这两个属性的理解是： absolute：如
relative与absolute的区别特点理解
qinAction的博客
08-19 674
relative与absolute的区别特点理解 ，绝对定位的元素，相对定位
relative和absolute使用
weixin_44545087的博客
02-23 334
relative和absolute使用 开发工具与关键技术：DW 作者：黄金燕 年级: 1805 撰写时间: 2019年2月16日 relative相对定位，absolute绝对定位某个元素，dispay隐藏某个元素，html代码如下： 点击“#”可以跳转到某个网页 css样式： 效果如下图所示： ...
浅谈绝对定位:absolute与相对定位:relative
yy_9_aa的博客
09-23 3770
绝对定位（absolute）: 1. 以浏览器左上角的为参考点设置位置。 2. 与浮动一样不占据空间位置。 3. 嵌套的盒子，父元素无定位，子元素绝对定位，子元素仍然参照浏览器。 4. 父元素绝对定位，子元素绝对定位，子元素以父元素为参考点。 5. 给行内元素绝对定位之后就转化为行内快了。 6. 可以设置z-index[调整元素的层叠顺序]值的范围是:0-999，值大的在上方
position：absolute与relative的区别
Ven
05-28 1万+
Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。 一般来讲...
页面布局 学习 absolute和relative区别
miracle_8的博客
05-12 467
1、 position的几种选择 static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。 relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进...
HTML中relative和absolute解释
Sir_LuciFer的专栏
09-18 2万+
position属性其实是指本体对上级的定位。默认的属性值都是static，静态。最关键的是relative（相对）以及absolute（绝对）。如：#a{position:relative;width:100px;height:100px;background:#999;}#b{position:absolute;hei
relative与absolute如何使用
最新发布
06-08
`relative` 和 `absolute` 是 CSS 定位属性，它们常用于控制元素在页面中的位置。它们的区别在于定位的基准点不同。 - `relative` 定位相对于元素本身在文档流中的位置进行定位。当一个元素被设置为相对定位时，它仍然占据着文档流中的位置，但是可以通过 `top`、`bottom`、`left` 和 `right` 属性来调整其在文档流中的位置。 - `absolute` 定位相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档的 body 元素定位。当一个元素被设置为绝对定位时，它会从文档流中完全脱离出来，不再占据原来的位置，可以通过 `top`、`bottom`、`left` 和 `right` 属性来精确定位元素。 下面是一个示例代码，演示了如何使用 `relative` 和 `absolute` 进行定位： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>定位示例</title> <style> .container { position: relative; width: 300px; height: 300px; background-color: #ccc; } .box1 { position: relative; top: 50px; left: 50px; width: 100px; height: 100px; background-color: #f00; } .box2 { position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background-color: #00f; } </style> </head> <body> <div class="container"> <div class="box1">相对定位</div> <div class="box2">绝对定位</div> </div> </body> </html> ``` 在上面的代码中，`.container` 元素被设置为 `relative` 定位，`.box1` 元素被设置为相对定位，`.box2` 元素被设置为绝对定位。 `.box1` 元素的位置是相对于它在文档流中的位置偏移了 50 像素，而 `.box2` 元素的位置是相对于 `.container` 元素偏移了 50 像素。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值