什么是定位呢？

定位（position），故名思议，就是确定元素在页面中的位置。

CSS的常用定位有两种，一种是相对定位，一种是绝对定位。

下面我们看例子

  1. <html>
  2. <head>
  3. <style>
  4. #div0 {
  5. /* 设置背景色为黄色 */
  6. background-color:yellow;
  8. /* 设置边框为1px的线条 */
  9. border:1px solid;
  11. /* 设置宽度为800px */
  12. width:800px;
  13. }
  14. #div1, #div2 {
  15. /* 设置宽度为300px */
  16. width:300px;
  18. /* 设置高度为300px */
  19. height:300px;
  21. /* 设置边框为1px的线条 */
  22. border:1px solid;
  23. }
  24. #div1 {
  25. /* 设置背景色为灰色 */
  26. background-color:#888;
  27. }
  28. #div2 {
  29. /* 设置背景色为蓝色 */
  30. background-color:#08c;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <div id="div0">
  36. <div id="div1"></div>
  37. <div id="div2"></div>
  38. </div>
  39. </body>
  40. </html>

有三个div，其中一个大的#div0，里面含有两个子div，#div1和#div2。

可以看到，大的黄色#div0，嵌套了一个灰色的#div1和一个蓝色的#div2。

由于div是块级元素，所以灰色和黄色的div不会在同一排显示。

测试1，相对定位

这个时候，我们给#div1，设置相对定位。

  1. #div1 {
  2. /* 设置背景色为灰色 */
  3. background-color:#888;
  5. /* 设置为相对定位 */
  6. position:relative;
  8. /* 设置相对于自己，上面向下移动20px，左侧向右移动30px */
  9. top:100px;
  10. left:150px;
  11. }

当我们给灰色的#div1做了相对定位之后，#div1相对于自己原来的位置做了移动。

但是其他的元素#div0、#div2的位置都没有发生变化，也就是说，给元素做了相对定位之后，其他元素不受影响，还认为该元素，在其原来的位置。

测试2，一个子元素绝对定位，父元素无定位

我们再给#div1改成绝对定位

  1. #div1 {
  2. /* 设置背景色为灰色 */
  3. background-color:#888;
  5. /* 设置为绝对定位 */
  6. position:absolute;
  8. /* 相对于页面html，上面向下移动20px，左侧向右移动30px */
  9. top:100px;
  10. left:150px;
  11. }

这时发现，原来的黄色#div0坍塌了，这是因为，绝对定位，同样会产生类似于float的脱离文档流，绝对定位的元素，与其他元素不在同一层面，处于其他元素的上方。

当父元素#div0无定位时候，绝对定位是相对于html文档来做的定位，与其父元素无关。

测试3，一个子元素绝对定位，父元素有定位

当我们给父div设置一个定位后（绝对定位/相对定位都可以)，情况又发生了改变

  1. #div0 {
  2. position:relative;
  3. }

从图上可以清楚的看到，#div1的位置，相对于父元素#div0发生了偏移。

也就是说，当父元素有定位，绝对定位是相对于父元素来做的定位。

测试4，两个子元素绝对定位，父元素无定位

现在我们给蓝色的#div2也做一个绝对定位，再来看一下效果。

  1. #div2 {
  2. /* 设置背景色为蓝色 */
  3. background-color:#08c;
  5. /* 设置为绝对定位 */
  6. position:absolute;
  8. /* 相对于页面html，上面向下移动30px，左侧向右移动60px */
  9. top:30px;
  10. left:60px;
  11. }

现在两个子元素都设置了绝对定位，那么他们就都处于其他元素的上方，黄色的父div，就在坍塌的只剩下一条线了。

那么两个子div，重叠在一起，到底怎样控制，谁在谁的上面呢？

可以用z-index属性来控制。

我们给#div1加上z-index属性

  1. #div1 {
  2. /* ... 其他css代码 */
  4. /* 设置层级为1 */
  5. z-index:1;
  6. }

在css中，用z-index来设置元素的层级，默认是0,谁的z-index大，谁就在上面。

当给#div1设置z-index为1后，#div2的z-index是默认值0,#div1的z-index比#div2的大，那么#div1就在#div2的上方了。

同理，当你给一个元素的z-index设置为-1时，那么这个元素就会在文档下面，看不见了。

总结：

  1. 相对定位，是相对自己原来位置所做的定位，其他页面元素不受影响，还认为该元素，在其定位前的地方。
  2. 如果父元素没有定位，那么绝对定位，是相对于页面html做的定位。
  3. 如果父元素有定位，那么绝对定位，是相对于其父元素所做的定位。
  4. 定位的层级由z-index属性控制，默认是0，谁大谁在上方。

CSS的相对定位和绝对定位（position）的更多相关文章

  1. 详解CSS的相对定位和绝对定位

    CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...

  2. Web—12-详解CSS的相对定位和绝对定位

    CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...

  3. 详解CSS的相对定位和绝对定位（讲得很详细）

    详解CSS的相对定位和绝对定位 CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left ...

  4. css定位:相对定位、绝对定位、固定定位的区别与特性

    css定位:相对定位.绝对定位.固定定位的区别与特性 原文地址:http://www.qingzhouquanzi.com/106.html css定位常用的有以下三种: 使用了定位的共同特性: 这三 ...

  5. CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位

    其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学习. 通过我们前面的学习,我们网页布局方法: ...

  6. CSS中相对定位与绝对定位

    看了几个讲解定位的博客,觉得还不错,分享之: 博客一:http://blog.sina.com.cn/s/blog_4bcf4a5e010008o0.html 文章中,主要需要参考的有两点: 1,相对 ...

  7. h5整理--详解css的相对定位和绝对定位

    浏览器默认状态下position的属性默认值是static也就是没有定位,元素出现在正常的文档流中,这个时候给元素设置的left,right.bottom.top这些偏移属性是没有效果的,不会生效: ...

  8. css 中相对定位和绝对定位

    1. css中定位机制有三种: 标准文档流, 浮动, 绝对定位 2. 绝对定位就属于第三种定位, 用到position属性, 下面就是具体设置 相对定位: 相对于自身原有位置(就是普通流的时候)进行偏 ...

  9. css中相对定位和绝对定位

    相对定位: #box_relative { position: relative; left: 30px; top: 20px; } 绝对定位: #box_relative { position: a ...

随机推荐

  1. 降临（线段树优化dp）

    降临 选定点i会有代价\(c_i\),如果一个区间j内的点全被选择,就可以获得回报\(p_j\).点数和区间个数\(<1e5\). 还以为是线段树优化网络流(50万个点200万条边看上去很可做的 ...

  2. （Python OpenGL）【4】Uniform变量 PyOpenGL

    (Python OpenGL) 原文:http://ogldev.atspace.co.uk/www/tutorial05/tutorial05.html(英文) __author__ = " ...

  3. luogu1210 回文检测

    Manacher 正确读法:抹内A撤(马拉车) (跟着假硕学英语) 我们把原来的字符串,通过玄学处理,变成只留下字母,且每两个字母之间有一个奇怪的字符的那种Manacher专用字符串. 建立双射关系f ...

  4. java.sql.Date/ java.util.Date/ java.util.Calendar 用法与区别

    在 JDK API  这样解释," 在 JDK 1.1 之前,类 Date 有两个其他的函数.它允许把日期解释为年.月.日.小时.分钟和秒值.它也允许格式化和解析日期字符串.不过,这些函数的 ...

  5. Qt 学习之路 2（12）：菜单栏、工具栏和状态栏

    Home / Qt 学习之路 2 / Qt 学习之路 2(12):菜单栏.工具栏和状态栏 Qt 学习之路 2(12):菜单栏.工具栏和状态栏  豆子  2012年9月10日  Qt 学习之路 2  2 ...

  6. iperf简单说明

    1.官网下载安装包 https://iperf.fr/iperf-download.php 2.安装(根据下载包的类型进行安装) 3.参数说明服务端(默认监听端口5201) iperf -s -u - ...

  7. HDU6444（子段和、分情况比较）

    要点 不难想到gcd一下然后枚举每个开头走一圈,并记录一下数值. 最终答案是分情况的:1.能走几圈走几圈然后加上最后剩余的最大子段和:2.也可能是最后一圈后面的拖后腿了,所以最后一圈没走完就停,即长度 ...

  8. mybatis用法

    转载:https://www.cnblogs.com/xdp-gacl/p/4261895.html 一.Mybatis介绍 MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架 ...

  9. d题

    #include<iostream>#include<algorithm>using namespace std;int a[200005];int b[200005];int ...

  10. Java学习笔记day03_引用数据类型

    1.引用数据类型 步骤: 1. 导包   2. 创建引用类型变量 类型 变量名 = new 类型名();   3. 使用数据类型的功能 变量名.功能名(); 如Scanner类: import jav ...