relative的意思就是相对自己的一开始的位置进行的定位。如图：
但是这个元素的本身边距不变，还在原来位置
 
absolute的意思就是
如果它的父元素设置了除static之外的定位，比如position:relative,或者position:absolute以及position:fixed，那么它就会相对于它的父元素来定位，位置通过left , top ,right ,bottom属性来规定，如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位 ，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位（比如position:relative）的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并非窗口,相对于窗口定位的是fixed）
一般z-index和left,top,right,bottom这些元素也是在设置了position的定位之后才会用到

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

  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中相对定位与绝对定位

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

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

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

  7. css position相对定位与绝对定位彻底搞懂

    定位position position本身就有给...定位的意思 position属性的值: static ---默认值 relative ---相对定位 absolute ---绝对定位 fixed ...

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

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

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

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

  10. CSS的相对定位和绝对定位（position）

    什么是定位呢? 定位(position),故名思议,就是确定元素在页面中的位置. CSS的常用定位有两种,一种是相对定位,一种是绝对定位. 下面我们看例子 <html> <head& ...

随机推荐

  1. 3、css边框以及其他常用样式

    一.边框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  2. UVa 12105 Bigger is Better (DP)

    题意:用不超过 n 根火柴,组成一个尽可能大的数. 析:很明显的一个DP题,首先不难想到这个dp[i][j] 表示前 i 根火柴,所能拼出的取模 m 为 j 的数,状态转移方程也很好写, dp[i][ ...

  3. 使用Bootstrap实现表格列的显示与隐藏

    来人,上效果图 走官方通道 1.引入样式文件(去github下载样式文件) <!--插件开--> <link rel="stylesheet" href=&quo ...

  4. SourceTree切换语言

    点击ok,重启SourceTree即生效 over!over!over!

  5. tinyxml一些应注意的问题

     今天在对使用tinyxml库的程序调试的时候,出现的一些问题让人很纠结,特记以此... 在对TixmlDocument创建时我是用new创建的,然后在用完之后我用delete释放掉,可是用gdb调试 ...

  6. CodeForces599C【贪心】

    题意: 给你一个序列,要求你从小到大排序,你可以划分成一个块一个块地进行块内排序,问你最多能分成几个块 思路: 贪心,首先感觉就是有正序的话我就分开啊: 难道倒序不能分块?321肯定不行啊. 存不存在 ...

  7. Lightoj1002 【搜索】

    题意: 两两之间的点的花费就是:从A点到B的一条路上某段的最大权值:给一个起点,求到各起点的最小花费. 思路: 一开始的思路: n不是才500,我先建个图,然后DFS一下,不对,是2500: 如果直接 ...

  8. UVA10140 Prime Distance【素数/数论】By cellur925

    题目传送门 我们注意到,L,R是肥肠大的.........我们不可能在1s内筛出2^31内的全部质数. “上帝为你关上一扇门,同时为你打开一扇窗” 我们又注意到,R-L是肥肠比较小的,珂以从这入手解决 ...

  9. Vue初始化

    Vue上面的函数怎么来的 vue的打包路径 在web中使用的vue打包路径: npm run build 打包生成vue.js 下面是依次引入: src/platforms/web/entry-run ...

  10. Sawgger框架

    简介详情:https://blog.csdn.net/sanyaoxu_2/article/details/80555328