1. absolute是相对于自己最近的父元素来定位的，relative是相对于自己来定位的
  2. relative 不脱离文档流，absolute 脱离文档流。也就是说：relative 的元素尽管表面上看到它偏离了原来的位置，但它实际上在文档流中还是没变。absolute的元素不仅位置改变了，同时也脱离了文档流。所以absolute会把非定位盒子覆盖掉。
  3. position:relative日常应用的时候一般是设置给position:absolute;的父层的,父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的, 不然position:absolute 会逐层向上寻找设置了position:relative的元素边界, 直到body元素..
  4. 这里还有一个文本流的概念。表现在float和relative的区别，relative既脱离文档流也脱离文本流，而float只是脱离了文档流。所以才会表现出，float元素会把非定位盒子覆盖掉，但不会覆盖非定位盒子里面的文本，因为没有脱离文本流，非定位盒子内的文本环绕在float的周围。而对于使用absolute元素，会把非定位和自的位置和开面的文本一起覆盖掉。
  5. 使用场景;

    l  Relative用法，经验案例：：

    1． 给absolute元素提供定位基准

    2． 有absolute元素时用其控制层级关系

l  两栏宽度自适应，常用经典做法案例：：

position:relative/static/fixed/absolute定位的区别以及使用场景的更多相关文章

  1. css中position属性(absolute|relative|static|fixed)概述及应用

    position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...

  2. 【转】CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  3. CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  4. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  5. fixed 和 absolute 定位的区别

    fixed:固定定位           absolute:绝对定位 在没有滚动条的情况下两者其实没有差异.但是在有滚动条后,fixed始终会在定好的位置不动,而absolute会随参照对象元素的宽高 ...

  6. Relative 定位与Absolute 定位实例

    一直没有弄懂相对定位与绝对定位之间的关系,今天特来学习一下.本实践都是在360浏览器下测试所得. <!DOCTYPE html> <html> <head> < ...

  7. position之fixed固定定位、absolute绝对定位和relative相对定位

    什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...

  8. 【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位

    什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...

  9. 浅析position:relative position:absolute

    定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样.如果理清了定位的原理,那定位会让网页实现的更加完美. 定位的定义: 在CSS中关于定位的内容是: ...

随机推荐

  1. yum update过程中失败后再次执行出现“xxxx is a duplicate with xxxx”问题

    问题现象: 解决办法: 利用yum-uitls中的工具package-cleanup指令,使用方法见下图,具体可通过man package-cleanup查询 列出重复的rpm包        pac ...

  2. export export-default import 使用场景

    export export-default import 使用场景:https://blog.csdn.net/weixin_36222137/article/details/77453774

  3. 在不打开excel的情况下用python执行excel

    import win32com.client import time path = r'absolute dir' #比如填文件的绝对路径,比如d:/file/stock.xlsx xl = win3 ...

  4. 使用Pandas读取大型Excel文件

    import os import pandas as pd HERE = os.path.abspath(os.path.dirname(__file__)) DATA_DIR = os.path.a ...

  5. ionic2(3) 密码键盘组件 ionic2-pincode-input 使用

    1.效果展示: 2.安装: npm install ionic2-pincode-input --save 3.app.module.ts配置 app.module.ts import { NgMod ...

  6. KiCAD层颜色修改

    KiCAD层颜色修改 KiCAD的PCB各层的颜色太过于暗淡,有时可能不适合操作者的习惯,尤其是铜层(布线层),这时候就需要去修改层的颜色,具体操作如下图:选择想要修改的层,双击左边颜色框框,进入之后 ...

  7. Nginx基础详细讲解

    Nginx基础详细讲解 链接:https://pan.baidu.com/s/1xB20bnuanh0Avs4kwRpSXQ 提取码:migq 复制这段内容后打开百度网盘手机App,操作更方便哦 1. ...

  8. 前端学习(十七）js数组（笔记）

    数组:        1.    var arr=[1,2,3,4]; 2.    var arr=new Array(1,2,3,4,5); 区别:        1.写法不一样,选择第一种(好写) ...

  9. 【LeetCode】拓扑排序

    [207] Course Schedule 排课问题,n门课排课,有的课程必须在另外一些课程之前上,问能不能排出来顺序. 题解:裸的拓扑排序.参考代码见算法竞赛入门指南这本书. class Solut ...

  10. 同时安装不同版本jdk引起的冲突解决方法

    https://blog.csdn.net/xiongyouqiang/article/details/79240521 现象 由于工作原因, 之前用的jdk1.8版本,因为线上生产环境都是jdk1. ...