通过案例理解position:relative和position:absolute

miqt 发布于2019-08-29 11:17 / 3232人阅读

摘要：并没有脱离普通流，只是视觉上发生的偏移。上面的案例中，将第二个子级元素换为内联元素，子元素下的起点位置并没有改变。

w3school过了HTML的知识之后，觉得要自己单纯地去啃知识点有点枯燥，然后自己也很容易忘记，所以便找具体的网站练手便补上不懂的知识点。position:relative和postion:absolute困扰了我快一个星期之久，网上找到的资料鱼龙混杂，刚确定“这样”的理解之后，看另一份资料，发现“这样”理解是错了，就这样不断更正，并记录下来，最终整理出这份，以备参阅。

若有错误，请指正。

下面的结果都是基于firefox38版本来测试的。

position:relative相对定位

1. 如何定位？
每个元素在页面的普通流中会“占有”一个位置，这个位置可以理解为默认值，而相对定位就是将元素偏离元素的默认位置，但普通流中依然保持着原有的默认位置。（在父级节点的content-box区定位，父级节点有文字的话，元素的默认位置则是紧随文字）
2. 不会改变行内元素的display属性。
3. 并没有脱离普通流，只是视觉上发生的偏移。
代码——



  
  position:relative定位测试

显示——

给子元素one的style加上position:relative;后显示——

给父级元素contain的style加上文字后显示——

将one由div节点改为span节点，并加入文字“你好”之后显示——


如果父级节点有文字的话...
  你好
  position:relative定位测试

position:absolute绝对定位

1. 如何定位浮动？

设置了TRBL
相对最近的设定了position:relative/absolute的父（祖先）节点的padding-box的区进行定位（忽略文字），找不到符合条件的父（祖先）节点，则相对浏览器窗口进行定位。

没有设置了TRBL
则默认浮动，默认浮动在父级节点的content-box区。

2. 不管是块级元素还是行内元素，应用了position:absolute之后，display为block：

可以设置width和height

没有设置的话，width默认为auto

3. 脱离文档流，容器（父）元素将得不到脱离普通流的子元素高度

代码——


祖先元素
  父级元素
    子元素

显示——

给子元素的style加上position:absolute;top:0px;left:0px;后显示——

给子元素的style加上position:absolute;top:0px;后显示——

注释：应用了position:absolute之后之设置了top，所以子元素的top紧贴浏览器窗口的top（距离为0px），因为没有设置left，所以子元素左边就默认父级元素content-box区的左侧进行定位（没应用position:absolute之前左侧该在哪个位置就在那个位置）
给子元素的style加上position:absolute;后显示——

案例：理解应用了position:absolute的元素没有设置TRBL的话，则默认浮动在父级节点的content-box区

用一句通俗易懂的话来说就是，它该在哪个位置就在哪个位置，只不过不占位而已。
先理解下上面示例代码的显示图，以及给自己元素加上position:absolute后的显示图。

给子元素的样式加上：display:inline;我们看看如果子元素是内联元素的话会如何显示。

假如有两个同级块级元素，看看第一个子元素和第二个子元素分别应用position:absolute后的效果如何。

祖先元素
  父级元素
      子元素(上)
      子元素(下)

如果这两个同级块级元素都应用了position:absolute;这两个元素会进行重叠，子元素(下)显示在前面，那是因为默认代码靠后的元素的z-index比较大。

上面的案例中，将第二个子级元素换为内联元素，子元素(下)的起点位置并没有改变。

试试给代码中的第一个元素的style加上display:inline;看看上面的子元素是内联元素的话会如何显示。

祖先元素
  父级元素
      子元素(上)
      子元素(下)

现在调换下应用position:absolute的位置
代码：

祖先元素
  父级元素
      子元素(上)
      子元素(下)

第一个子元素是内联元素的话——

祖先元素
  父级元素
      子元素(上)
      子元素(下)

综上：不管是块级元素还是内联元素应用position:absolute并且不设置TRBL，它都会默认在父级元素的content-box区浮动。原来的起点位置也是应用绝对定位后的起点位置，只不过如果应用了position:absolute的内联元素左边也有内联元素的话，它的起点位置会变得更靠前，直到紧挨左边内联元素的边界。

综合案例：看看position:relative和position:absolute的综合效果

沿用position:absolute的案例代码——


祖先元素
  父级元素
    子元素

在上面代码的基础上分别应用以下的定位后看看效果，并理解。

案例诊断：

给祖先div加上"position:relative;"以及给子元素加上
"position:absolute;top:0px;left:0px;"

给父级div加上"position:relative;"以及给子元素加上
"position:absolute;top:0px;left:0px;"

给祖先和父级div加上"position:relative;"以及给子元素加上
"position:absolute;top:0px;left:0px;"

给祖先div加上"position:absolute;"以及给子元素加上
"position:absolute;top:0px;left:0px;"

给父级div加上"position:absolute;"以及给子元素加上
"position:absolute;top:0px;left:0px;"

给祖先和父级div加上"position:absolute;"以及给子元素加上
"position:absolute;top:0px;left:0px;"

应用：消除环绕浮动元素的影响

父级，position:relative（不设TRBL）
子级，第一个div的float:left；第二个div的position:absolute（不设TRBL）
因为第二个子级div元素默认会在父级元素的content-box区浮动，它可以消除上一个同级子级div元素的环绕浮动影响。
案例代码——


  
  position:absolute消除浮动环绕的影响测试

显示——

给父级元素加上position:relative，给第二个子级元素加上position:absolute后，显示——

我们看到，确实是消除了环绕浮动元素环绕的影响，position:absolute的优先级高，所以float元素被遮住了，并不是消失了。另外看到contain元素的高度不受子元素的影响了，因为它们都脱离文档流了。

参考颜色

修改记录

2016.12.23增补案例理解默认浮动

私有云专线服务 position:absolute 理解module和injector 云计算和大数据的理解通过js和元素赋值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111549.html

通过案例理解position:relative和position:absolute

摘要：并没有脱离普通流，只是视觉上发生的偏移。上面的案例中，将第二个子级元素换为内联元素，子元素下的起点位置并没有改变。 w3school过了HTML的知识之后，觉得要自己单纯地去啃知识点有点枯燥，然后自己也很容易忘记，所以便找具体的网站练手便补上不懂的知识点。position:relative和postion:absolute困扰了我快一个星期之久，网上找到的资料鱼龙混杂，刚确定这样的理解...

codergarden 2019-08-01 15:44 评论0 收藏0
详解css相对定位和绝对定位

摘要：以上两点点可以总结出，相对定位总是以父级左上角为原点进行定位的，如果父级不存在，则以浏览器左上角进行定位。赞助我以写出更好的文章，give me a cup of coffee? 2017最新最全前端面试题案例代码1 .rel{ border: 1px solid #ccc; height: 200px; ...

Jaden 2019-08-28 17:57 评论0 收藏0
css定位案例探讨（position属性详解）

简述定位问题一直是新手学习css的一个难点，现在我将他们总结出来，希望对大家有帮助 position详解在css中，通过position属性，配合top,right,left,buttom对元素进行定位position属性有：static，relative，absolute，fixed四种，下面分别探讨默认定位static Document ...

Half 2019-08-28 18:22 评论0 收藏0
《CSS世界》笔记四：流的保护与破坏

摘要：和可以看作是同父异母的兄弟关系。例子如下结果如下而父元素设置属性的方式则是利用了的特性下面将会详细讲解结界全称为，中文为块级格式化上下文。上一篇：《CSS世界》笔记三：内联元素与对齐下一篇：《CSS世界》笔记五：CSS层叠规则及元素隐藏写在前面原本博客名为浮动与定位，但是《CSS世界》第六章节的内容不仅有浮动定位，很大一部分篇幅都在讲BFC和overflow。更吸引人的是，作者将...

he_xd 2019-08-29 16:20 评论0 收藏0
CSS3 巧妙实现聊天气泡

摘要：想必大家都知道，这里不赘述，聊一聊其他实现方法。这里的三角形部分可以使用正方形代替，实现同样效果，方法就是旋转小正方形使其一部分露在外面。 showImg(https://segmentfault.com/img/bVEcKn?w=4136&h=1956); 前一阵子敢玩的 Mobile 页改版完成了，就之前的页面风格更加扁平化，从暗色系为主背景转到亮色背景，去掉更多的阴影，给用户简约...

bang590 2019-08-29 11:26 评论0 收藏0