相对（relative）定位和绝对（absolute）定位

2024-05-15 16:53:31

首先，position的这两个属性一般是不使用的，因为有了浮动，所以我们才需要position属性来实现我们想要的布局。

1.相对定位（relative）：相对于原来位置（原来位置指在文档流中默认的位置，若加上了浮动时，那么这个原来位置就是你设定浮动时的位置）的偏移，原来位置依然占据空间。

（1）box1和box2都没有设置position属性（没有设置float属性时）

效果图：我们可以看出box盒子设置的left（包括top，right，bottom等）属性根本没起到任何作用

（2）给box2加上position：relative，效果如图：这时候box2相对于原来的位置分别向右和下偏移了100px

（3）有float属性时：

（4）效果图：

（5）给box2加上position：relative后：相对于原来的位置偏移

（6）给两个标签都加上position：relative时：两个盒子都只相对于自己原来的位置偏移

2.绝对定位（absolute）：指子元素在父元素里面相对于父级元素的定位，设置绝对定位的元素，它会浮起来，不会占据文档流空间（相对定位会占据空间）。

（1）给box1添加position：relative属性，给box02添加position：absolute属性

效果如图：box02的父级元素box2没有position属性，它就继续向上一级寻找，找到box1然后以box1为参照点移动。可以看到box02定位到了右下角，box03占据了box02 原有的位置（即absolute属性会删除原来位置占据的文档流空间），

（2）给box2设置position：absolute属性时，我们看到box02的位置是以box2位参照物来移动的。

（3）同样，我们给box03也加上position：absolute属性，此时box03的参照物也是box2

以上就是我对相对定位和绝对定位的了解，若有不足之处，还请指正。

相对（relative）定位和绝对（absolute）定位相关推荐

CSS 相对/绝对(relative/absolute)定位系列（二）
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1330 一.常 ...
CSS 相对|绝对(relative/absolute)定位
一.absolute属性的情感化认识我对position:absolute属性感性化的认识:absolute是一个善良的有个性的,我行我素.喜欢凌驾一切之上的魔鬼.这家伙,不喜欢也算不上讨厌,但是知 ...
CSS 相对|绝对(relative/absolute)定位系列（一）
一.有话要说以前写内容基本上都是:眼睛一亮--哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑 ...
[css] position的relative和absolute定位原点是哪里？
[css] position的relative和absolute定位原点是哪里? absolute: 定位原点为第一个position不为static的父级元素的左上角. 可以基于该特性实现heigh ...
CSS 相对|绝对(relative/absolute)定位系列
一.有话要说以前写内容基本上都是:眼睛一亮--哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑 ...
html div相对位置,CSS 相对|绝对(relative/absolute)定位系列（一）
1.绝对定位和浮动元素是近亲:都具备包裹性和破坏性包裹性:包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100 ...
relative、absolute定位居中以及小总结
relative.absolute 定位小总结: 一.relative 定位总结: 特点: 1.除了位置被left等四个属性影响,对元素没有任何影响(大小) 2.只设置position属性,元素没有任 ...
CSS 相对|绝对(relative/absolute)定位系列（二）
1. 因为事先标准就已经在文字的后面显示,设置absolute之后因为跟随性仍然是在原来的文字,然后再设置margin实现定位即可 2. absolute正业之元素隐藏元素隐藏与显示是我们在页面制作 ...
标准h5的定位_H5中的定位
这次给大家带来H5中的定位,H5中定位的注意事项有哪些,下面就是实战案例,一起来看一下. 一.定位流分类 1.1相对定位 1.2绝对定位 1.3固定定位 1.4静态定位二.什么是相对定位? 相对定位 ...
position:sticky 粘性定位 (sticky) 与固定定位
position:sticky是css定位新增属性:可以说是static(没有定位) 和固定定位fixed 的结合:它主要用在对 scroll 事件的监听上:简单来说,在滑动过程中,某个元素距离其父 ...

最新文章

热门文章