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

若有错误,请指正。

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

position:relative相对定位

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

<body style='margin:0;padding:0;background:#BDD7EE;color:white;'>
<div class='contain' style='margin:10px;border:10px solid white;width:300px;background:#F8CBAD;padding:10px 0 0 10px;font-size:20px;font-weight:bold;'>
<div class='one' style='width:50px;height:50px;background-color:#FFE699;top:-10px;left:0px;'></div>
<div class='two' style='height:50px;color:#fff;background-color:#C5E0B4;'>position:relative定位测试</div>
</div>
</body>

显示——

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

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

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

<body style='margin:0;padding:0;background:#BDD7EE;color:white;'>
<div class='contain' style='margin:10px;border:10px solid white;width:300px;background:#F8CBAD;padding:10px 0 0 10px;font-size:20px;font-weight:bold;'>如果父级节点有文字的话...
<span class='one' style='width:50px;height:50px;background-color:#FFE699;position:relative;top:-10px;left:0px;'>你好</span>
<div class='two' style='height:50px;color:#fff;background-color:#C5E0B4;'>position:relative定位测试</div>
</div>
</body>

position:absolute绝对定位

1. 如何定位浮动?

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

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

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

  • 可以设置width和height

  • 没有设置的话,width默认为auto

3. 脱离文档流,容器(父)元素将得不到脱离普通流的子元素高度

代码——

<body style='margin:10px;width:300px;color:white;background-color:#BDD7EE;'>
<div style='background-color:#F8CBAD;padding-top:10px;'>祖先元素
<div style='background-color:#FFE699;border:10px solid white;padding-top:10px;'>父级元素
<div style='background-color:#C5E0B4;'>子元素</div>
</div>
</div>
</body>

显示----

给子元素的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后的效果如何。

<div style='background-color:#F8CBAD;padding-top:10px;'>祖先元素
<div style='background-color:#FFE699;border:10px solid white;padding-top:10px;'>父级元素
<div style='background-color:#62C292;'>子元素(上)</div>
<div style='background-color:#C5E0B4;'>子元素(下)</div>
</div>
</div>

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

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

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

<div style='background-color:#F8CBAD;padding-top:10px;'>祖先元素
<div style='background-color:#FFE699;border:10px solid white;padding-top:10px;'>父级元素
<div style='background-color:#62C292;display:inline;'>子元素(上)</div>
<div style='background-color:#C5E0B4;'>子元素(下)</div>
</div>
</div>

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

代码:

<div style='background-color:#F8CBAD;padding-top:10px;'>祖先元素
<div style='background-color:#FFE699;border:10px solid white;padding-top:10px;'>父级元素
<div style='background-color:#C5E0B4;'>子元素(上)</div>
<div style='background-color:#62C292;'>子元素(下)</div>
</div>
</div>

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

<div style='background-color:#F8CBAD;padding-top:10px;'>祖先元素
<div style='background-color:#FFE699;border:10px solid white;padding-top:10px;'>父级元素
<div style='background-color:#C5E0B4;display:inline;'>子元素(上)</div>
<div style='background-color:#62C292;'>子元素(下)</div>
</div>
</div>

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

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

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

<body style='margin:10px;width:300px;color:white;background-color:#BDD7EE;'>
<div style='background-color:#F8CBAD;padding-top:10px;'>祖先元素
<div style='background-color:#FFE699;border:10px solid white;padding-top:10px;'>父级元素
<div style='background-color:#C5E0B4;'>子元素</div>
</div>
</div>
</body>

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

案例诊断:

    • 给祖先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:absolute的优先级高,所以float元素被遮住了,并不是消失了。另外看到contain元素的高度不受子元素的影响了,因为它们都脱离文档流了。

参考颜色

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

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

<div class='contain' style='margin:10px;width:300px;background:#F8CBAD;padding:10px 0 10px;color:white;'>
<div class='one' style='width:30px;height:30px;background-color:#FFE699;float:left;'></div>
<div class='two' style='color:#fff;background-color:#C5E0B4;'>position:absolute消除浮动环绕的影响测试</div>
</div>

显示--

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

转载自:https://segmentfault.com/a/1190000006924181

通过案例理解position:relative和position:absolute的更多相关文章

  1. position:relative/static/fixed/absolute定位的区别以及使用场景

    absolute是相对于自己最近的父元素来定位的,relative是相对于自己来定位的 relative 不脱离文档流,absolute 脱离文档流.也就是说:relative 的元素尽管表面上看到它 ...

  2. position:relative和position:absolute的差别及使用方法

    这几天在做项目时遇到做选项卡的功能时,标题和内容区域的背景颜色不同.且须要选到当前标题时,此标题以下会出现下边框及小三角边框,这样就会超出标题背景颜色需覆盖以下内容区域.这时就须要用到potition ...

  3. css里面position:relative与position:absolute的区别

    position:absolute这个是绝对定位:是相对于浏览器的定位.比如:position:absolute:left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览 ...

  4. position: relative 和 position: absoution 的详解

    position属性指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型 relative:生成相对定位的元素,相对于其正常位置进行定位. 对应下图的偏移 absolute: 生成绝对定位的元素 ...

  5. CSS--position:relative和position:absolute

    position:relative相对定位 1. 如何定位?每个元素在页面的普通流中会“占有”一个位置,这个位置可以理解为默认值,而相对定位就是将元素偏离元素的默认位置,但普通流中依然保持着原有的默认 ...

  6. css中position:relative的真正理解

    其实话说一直以来也没真正去理解好position:relative的用法的真实意义. 我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的 ...

  7. 理解css中的position属性

    理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...

  8. 最容易理解的CSS的position教程——十步图解CSS的position

    CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in ...

  9. 【CSS】position relative 用法

    Relative是position的一个属性,是相对定位. position的默认值是static,(也就是说对于任意一个元素,如果没有定义它的position属性,那么它的position:stat ...

随机推荐

  1. C++ 头文件系列(set)

    简介 头文件包含set.multiset两个类模版,这里要描述的概念与map非常相似,甚至连成员函数都几乎一样,所以这篇随笔会很短. set set如果翻译成中文应该是集合的意思,这里更确切的说是唯一 ...

  2. 使用Python Shapefile Library创建和编辑Shapefile文件

    介绍 shapefile是GIS中非常重要的一种数据类型,在ArcGIS中被称为要素类(Feature Classes),主要包括点(point).线(polyline)和多边形(polygon).P ...

  3. 小白的Python之路 day4 生成器并行运算

    一.概述 我们已经明白生成器内部的结构,其实就是通过像函数这样的东西实现的! 多线程和单线程:简单来说多线程就是并行运算,单线程就是串行运算 二.生成器执行原理 第一步:生成一个生成器  第二步:执行 ...

  4. 关于mysql的loose index scan的几点疑问

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/102 关于MySQL的loose index scan有几点疑问 ...

  5. CSS3 文字与字体相关样式

    给文字添加阴影 文字换行 客户端文字 font-size-adjust属性 给文字添加阴影-text-shadow属性 text-shadow:length length length color 前 ...

  6. Oracle数据库中插入日期型数据(to_date的用法)(转载)

    往Oracle数据库中插入日期型数据(to_date的用法) INSERT  INTO  FLOOR  VALUES  ( to_date ( '2007-12-20 18:31:34' , 'YYY ...

  7. 关于《Web接口开发与自动化测试--基于Python语言》

    关于封面logo 首先,你会被书封上面logo吸引,这么炫酷?双蛇杖?嗯,这是Requests的新logo. 旧的logo是一只乌龟. 新logo是双蛇杖: 看到新logo我首先想到的是 火爆全网页游 ...

  8. MySQL 最左前缀(Leftmost Prefix) & 组合索引(复合索引,多列索引)

    资料来源于网络,仅供参考学习. CREATE TABLE test(a INT,b INT,c INT,KEY idx(a,b,c)); 优: SELECT * FROM test WHERE a=1 ...

  9. java递归实现文件夹文件的遍历输出

    学习java后对一个面试小题(今年年初在团结湖面试的一个题目) 的习题的编写. ''给你一个文件,判断这个文件是否是目录,是目录则输入当前目录文件的个数和路径,''' /** * @author li ...

  10. Java中使用LocalDate根据日期来计算年龄

    Java中和日期直接相关的类有很多,平时最常用到的就是java.util package下面的Date和Calendar,需要用到格式的时候还会用到java.text.SimpleDateFormat ...