理解 position:relative 与 position:absolute

position 有三个值，static（静态）、relative（相对）、absolute（绝对）；由于static是所有页面元素的默认值，因此设置元素的定位类型时几乎不用这个值，除非用于覆盖之前的定义。
对于后两者，一般应用：在一个相对定位的元素里面放置一个绝对定位的元素，如图：

子元素B可以通过top、right、bottom、left来精确定位，定位的参考目标就是其具有相对定位属性的父级元素A；并且设置这些偏移后，产生的空隙会被后面的元素填充（如果后面的元素足够尺寸的话）。由于B元素具有absolute定位属性，相当于从文档流中抽取出来，浮动在原平面排版上，形成“层”，如果有多个“层”，层与层之间就必然会有谁覆盖谁，谁在上谁在下的竞争关系，因此，为解决这个竞争，就产生了 z-index（空间坐标系的Z轴）属性，谁的值大，谁就在上面。另外，如果父级元素A没有设置relative，那么B元素就会以body标签当作参考点。

对于具有position:relative属性的元素A，其top、right、bottom、left四个方向的位置偏移就会以该元素的原来位置作为参考点，而不是像上面说的，以具有relative定位属性的父级元素或body作为参考点。在设置了偏移后产生了空隙，其周围的元素并不会填充这些空隙，即使它们足够尺寸(演示)。值得注意的是，此时元素A的margin，margin将作用于该元素的原来位置，由于原位置产生偏移，该元素的最终位置将是margin与top、right、bottom、left共同作用后的位置，并且其周围元素的位置也将产生影响。

回过头来再看看 relative 里面的 absolute，比如上面的A、B两个元素，如果两个元素都设置了top、right、bottom、left，对于元素B来说，其位置偏移的参考点是元素A偏移后的位置，不是元素A的原位置，同样，如果元素B有margin，其参考点也是元素A偏移后的位置，这点很重要，这才是absolute的概念(演示)。

转载于:https://www.cnblogs.com/gzhnan/articles/1145502.html

理解 position:relative 与 position:absolute相关推荐

深入理解position:relative 与 position:absolute（divb相对于diva进行绝对定位）
position 有三个值,static(静态).relative(相对).absolute(绝对):由于static是所有页面元素的默认值,因此设置元素的定位类型时几乎不用这个值,除非用于覆盖之前的 ...
{转摘}理解 position:relative 与 position:absolute
转载:<a href="http://www.happyshow.org/article/125.html" target="_blank"> po ...
区分position:relative； position:absolute； position:fixed
区分position:relative; position:absolute; position:fixed 对于position:relative; position:absolute; posit ...
position:relative 与 position:absolute
position 有三个值,static(静态).relative(相对).absolute(绝对):由于static是所有页面元素的默认值,因此设置元素的定位类型时几乎不用这个值,除非用于覆盖之前的 ...
position:relative与position:absolute的定位区别
CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置 ...
position:ablosute和position:relative的简单理解
##position:ablosute和position:relative的简单理解 ## 先看一下两者的定义: relative(相对定位) 对象不可层叠.不脱离文档流,参考自身静态位置通过 top ...
微信小程序位置定位position详解，相对定位relative，绝对定位absolute相关问题
一.位置position[定位属性:static,relative,absolute,fixed,inherit,-ms-page,initial,unset] 1.static:元素框正常生成,块级 ...
position属性:绝对定位position: absolute；相对定位 position: relative；固定定位 position: fixed；
position 属性: position常见的定位模式: 定位模式描述是否脱离文档流移动模式定位偏移属性 static 默认属性对象遵循常规流不移动不移动 relative 相对定位 ...
CSS中的position:relative理解
今晚来说说CSS中的position属性,其实在实际开发页面过程中,记录一下这个让我迷茫的relative,我将它分为三种情况进行说明包含关系:父级absolute,子级relative: 包含关系 ...
CSS 元素的定位之相对定位 position: relative
在CSS中,通过 position属性来对元素进行定位,可选的定位类型有 static | relative | absolute | fixed,默认值为 static,表示没有定位,元素保持在它原 ...

理解 position:relative 与 position:absolute

理解 position:relative 与 position:absolute相关推荐

最新文章

热门文章