目录

  • 何为定位
  • 偏移量
    • 垂直方向
      • top
      • bottom
    • 水平方向
      • left
      • right
  • relative-相对定位
    • 何为相对定位
    • 相对定位的特点
    • 实例
      • 元素代码的起始位置
      • 元素若不开启相对定位，即便设置了偏移量，元素也不会发生任何的变化。
      • 元素开启相对定位，也设置偏移量
        • top偏移量
        • left偏移量
        • bottom偏移量
        • right 偏移量
  • 绝对定位-absolute
    • 何谓绝对定位
    • 绝对定位的特点
    • 布局等式
      • 水平方向布局等式
      • 垂直方向布局等式
    • 包含块
      • 重要说明
    • 子绝父相
      • 开启绝对定位的父元素不开启相对定位
      • 开启绝对定位的父元素开启了相对定位
  • 总结

何为定位

我们可以通过定位将元素摆放到页面的任意位置，因为它是一种高级的布局手段，它有以下5个可选值：

值 解释
static 默认值，元素是静止的，没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位

对于以上5个可选值，我们最易弄混的便是relative 和absolute 这两个。

因而，就这两个可选值进行如下详细分析，但在分析之前，我们要考虑下偏移量，因为偏移量对定位是有很大影响的。

比如如果元素开启了相对定位，但不设置偏移量，元素不会发生任何的变化。

偏移量

只要元素开启了定位，我们可以通过偏移量来设置元素的位置。

垂直方向

定位元素垂直方向的位置由top 和 bottom 两个属性来控制，但通常情况下，我们只会使用其中之一。

垂直方向的元素大小（是相对父元素）：top + margin-top + border-top + position-top + content + position-bottom + border-bottom + margin-bottom + bottom

top

  • 定位元素和定位位置上边的距离。
  • top值越大，定位元素越向下移动。

bottom

  • 定位元素和定位位置下边的距离。
  • bottom值越大，定位元素越向上移动。

水平方向

定位元素水平方向的位置由left和right两个属性控制，通常情况下，我们只会使用其中之一。

水平方向的元素大小（是相对父元素）：left + margin-left + border-left + position-left + content + position-right + border-right + margin-right + right

left

  • 定位元素和定位位置的左侧距离。
    -left越大，元素越靠右。

right

  • 定位元素和定位位置的左侧距离。
  • right越大，元素越靠右。

relative-相对定位

何为相对定位

当元素的position的属性值设置为relative时，即开启了元素的相对定位。

开启相对定位的元素相对其在起始位置的移动距离，即其起始位置为：top:0,left:0

相对定位的特点

  1. 元素开启相对定位以后，如果不设置偏移量，元素不会发生任何的变化。
  2. 它是参照于元素在文档流中的位置进行定位的。
  3. 它会提升元素的层级。
  4. 它不会使元素脱离文档流。
  5. 它不会改变元素的性质：块元素还是块元素，行内元素还是行内元素。

实例

元素代码的起始位置

现在有个div元素，如下代码所示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>模拟relative</title><style type="text/css">.div {width: 200px;height: 200px;border: medium solid green;}</style></head><body><div class="div"></div></body>
</html>

元素的起始位置，便是其距离浏览器顶部和左部为0的位置，即```left:0,top:0···，入土所示：

元素若不开启相对定位，即便设置了偏移量，元素也不会发生任何的变化。

此时，在div的元素加上 ···top: 100px;```样式，如代码所示：

.div {width: 200px;height: 200px;border: medium solid green;top: 100px;
}

你会发现，没有设置position:relative，即便设置了top:100px，元素依旧没有发生变化，还是在其起始位置，如图所示：

元素开启相对定位，也设置偏移量

top偏移量

在div元素加上top: 100px; position: relative;样式，如代码所示：

.div {width: 200px;height: 200px;border: medium solid green;top: 100px;position: relative;
}

此时代码相对其起始位置往下偏移了100px，如图所示：


其在垂直方向向下移动100px，即上边框距离其起始位置的上边框100px。

但，其仍旧是块元素， 没有脱离文档流（水平方向仍占据一行）。

left偏移量

在div元素加上top: 100px;position: relative;样式，如代码所示：

.div {width: 200px;height: 200px;border: medium solid green;top: 100px;left: 100px;position: relative;
}

其在垂直方向向下移动100px，即上边框距离其起始位置的上边框100px。

同时，其在水平方向向右移动100px，即上边框距离其原始位置的左边框100px。

但，其仍旧是块元素， 没有脱离文档流（水平方向仍占据一行）。

bottom偏移量

在div元素加上bottom: 100px; position: relative;样式，如代码所示：

.div {width: 200px;height: 200px;border: medium solid green;bottom: 100px;position: relative;
}

其在垂直方向向上移动100px，即上边框距离其起始位置的上边框-100px，如图所示：

right 偏移量

在div元素加上right: 100px; position: relative;样式，如代码所示：

.div {width: 200px;height: 200px;border: medium solid green;right: 100px;position: relative;
}

其在水平方向向右移动100px，即左边框距离其起始位置的左边框是-100px，如图所示：

绝对定位-absolute

何谓绝对定位

当元素的position的属性值设置为absolute时，则开启了元素的绝对定位。

绝对定位的特点

  1. 开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化。

  2. 开区绝对定位后的元素脱离文档流

  3. 绝对定位会改变元素的性质，行内变成快，快的高度被内容撑开。

  4. 决定定位会使元素提升一个层级。

  5. 绝对定位元素时相对于其包含块进行定位的。

布局等式

水平方向布局等式

水平方向的元素大小（是相对父元素）：left + margin-left + border-left + position-left + content + position-right + border-right + margin-right + right

垂直方向布局等式

垂直方向的元素大小（是相对父元素）：top + margin-top + border-top + position-top + content + position-bottom + border-bottom + margin-bottom + bottom**

包含块

在正常情况下，包含块就是离当前元素最近的祖先快元素，比如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>包含块</title>
</head>
<body><div id="div1"><div id="div2"></div>
</div>
</body>
</html>

id = div1便是 id = div2的包含块。

重要说明

html是根元素，初始包含块。

子绝父相

如果当前元素开启了绝对定位，那么其父元素便需要开启相对元素。

开启绝对定位的父元素不开启相对定位

假如元素开启了绝对定位后，但父元素没有开启相对定位，那么布局会是什么样的呢，如下代码所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>包含块元素</title><style>#div1 {width: 50px;height: 50px;border: 1px solid green;}#div2 {left: 10px;top: 10px;width: 20px;height: 20px;border: 1px solid red;position: absolute;}</style>
</head>
<body><div id="div1"><div id="div2"></div>
</div>
</body>
</html>

输出结果如下图：


此时，id = div2便是相对于根元素html布局，其水平布局等式便是：

html大小 = left + margin-left + border-left + position-left + content + position-right + border-right + margin-right + right
即如下
798.400px = 10px + 0px + 1px + 20px + 0px +  1px + 0px + 766.400px

开启绝对定位的父元素开启了相对定位

如果开启绝对定位的父元素开启了相对定位，那么子元素的布局又会是什么情况呢？如下代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>包含块元素</title><style>#div1 {width: 50px;height: 50px;border: 1px solid green;position: relative;}#div2 {left: 10px;top: 10px;width: 20px;height: 20px;border: 1px solid red;position: absolute;}</style>
</head>
<body><div id="div1"><div id="div2"></div>
</div>
</body>
</html>

结果如图所示：


父元素（id = div1）的大小为 40px，那么子元素（ id= div2）的总大小为多少呢，根据下面的公式计算可得：

html大小 = left + margin-left + border-left + position-left + content + position-right + border-right + margin-right + right
即如下
40px = 10px + 0px + 1px + 20px + 0px +  1px + 0px + 18px

因而，你会看到如果子元素开了绝对定位后，父元素也可开启相对定位，那么，子元素的整体大小便为父元素的大小。

总结

相对定位：是针对自身起始位置的定位

绝对定位：是相对包含块（离当前元素最近的父元素）定位的

一文读懂css【css3】绝对（absolute）定位和相对（relative）定位 相对定位是相对谁定位的 绝对定位又是根据谁绝对定位的 子绝父相 包含块相关推荐

  1. Web前端，CSS常用之相对定位和绝对定位的区别，静态定位、子绝父相、固定定位、元素的层级关系的了解

    前言 持续学习总结输出中,今天分享的是Web前端,CSS常用之相对定位和绝对定位的区别,静态定位.子绝父相.固定定位.元素的层级关系的了解 1.定位的基本介绍 我们的网页常见布局方式有:标准流.浮动. ...

  2. CSS中定位（带你实操代码掌握固定定位、绝对定位与相对定位（子绝父相））

    https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) 目录 固定定位 绝 ...

  3. CSS中文档流之普通流，浮动及定位、浮动特性及清除浮动的方式、定位模式，子绝父相搭配定位方式、z-index层级

    文档流: 普通流(normal flow): 字面意思是普通流或者标准流,也就是常说的文档流,指网页内标签正常是从上到下,从左到右排列的意思,css的定位机制有3种:普通流(标准流).浮动.定位. 浮 ...

  4. 【CSS】定位--静态定位-相对定位-绝对定位-子绝父相-固定定位-粘性定位

    文章目录 1. 为什么需要 2. 定位组成 定位 = 定位模式 + 边偏移 2.1 定位模式 2.2边偏移 3. 静态定位 static (了解) 4. 相对定位 relative (重要) 5. 绝 ...

  5. CSS中的子绝父相布局

    前言 在CSS中有三种定位方式:相对定位.绝对定位和固定定位 一.相对定位 相对定位的属性是position:relative,如过对某个元素设置了相对定位,元素就会根据自身左顶点进行位置偏移,元素还 ...

  6. css定位(子绝父相)

    定位 ☆定位核心 -- 子绝父相 1.1 在开发中什么时候需要使用定位? 定位就是解决标准流和浮动无法实现的效果. 1.2 「定位组成」 定位 = 定位模式 + 边偏移 定位模式:用于指定元素的定位方 ...

  7. css定位-子绝父相

    题目要求: 开始的代码: <!DOCTYPE html> <head><meta charset="utf-8" /><link rel= ...

  8. 第6天-css笔记 三大定位-定位 子绝父相 与精灵图

    定位 ================================================================================= 用了子绝父相而带来的子盒子居中 ...

  9. 一文读懂css的相对定位【relative position】以及相对定位为什么要设置偏移量？

    目录 何为定位 偏移量 垂直方向 top bottom 水平方向 left right relative-相对定位 何为相对定位 相对定位的特点 实例 元素代码的起始位置 元素若不开启相对定位,即便设 ...

最新文章

  1. 2.27 MapReduce Shuffle过程如何在Job中进行设置
  2. 使用repeater,遍历数据,不规则排序，不同的样式之间切换
  3. mfc 内嵌 本地html,MFC程序中内嵌网页,附示例工程
  4. python怎么读取文件-Python中怎么读写文件
  5. 第十九天：实施定性风险分析
  6. Nginx与Serssion一致性问题
  7. JQuery中ajax的相关方法总结
  8. 20101008 搬家
  9. 计算机处理信息的过程按先后顺序可表述为,信息加工理论按照信息处理的先后顺序将记忆区分为三个阶段系统;感觉记忆、()长时记忆。...
  10. 如何帮助企业把风控做得更好？
  11. python 保存dataframe_在python2中将dataframe保存到CSV
  12. php数组递归函数返回值,PHP递归函数返回值使用实例
  13. 怎么用计算机按log以2为底,log以2为底4的对数在计算器上怎么按？
  14. Python周刊518期
  15. ESLint和Prettier的配置
  16. PDF Reader Pro for Mac 2.7.4.1 中文版 PDF编辑/批注/OCR/转换工具
  17. 相关性和差异的显著性
  18. msfvenom生成木马攻击-Windows10实现自己黑自己
  19. Boboniu Plays Chess
  20. 【无标题】【全开源】bat编辑器4.5

热门文章

  1. iview-admin 登录实现
  2. js将颜色rgb转换为16进制
  3. u盘盘符不显示 win10_Win10系统插入U盘不显示的解决方法
  4. 如何让小家电带电池设备快速充满电
  5. Ubuntu 14.04（64bit）使用mentohust连接校园网
  6. OSChina 周六乱弹 —— 有人要提亲吗？
  7. Go 接口实现原理【高阶篇】： type _interface struct
  8. Matlab图像处理工具箱使用
  9. 普中科技开发板使用说明书_普中科技单片机实验板使用操作说明.pdf
  10. 中国网民近一年因垃圾诈骗信息等遭受经济损失915亿