position:absolute这个是绝对定位;
是相对于浏览器的定位。
比如:position:absolute;left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。position:relative是相对定位,是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。比如:<div class="1"></div><div class="2"></div>当1固定了位置。1的样式float:left;width:100px; height:800px;
2的样式为float:left; position:relative;margin-left:20px;width:50px;
2的位置在1的右边,距离120px

CSS里面position:relative与position:absolute 区别相关推荐

  1. position:relative与position:absolute的定位区别

    CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置 ...

  2. 深入理解position:relative 与 position:absolute(divb相对于diva进行绝对定位)

    position 有三个值,static(静态).relative(相对).absolute(绝对):由于static是所有页面元素的默认值,因此设置元素的定位类型时几乎不用这个值,除非用于覆盖之前的 ...

  3. {转摘}理解 position:relative 与 position:absolute

    转载:<a href="http://www.happyshow.org/article/125.html" target="_blank"> po ...

  4. 区分position:relative; position:absolute; position:fixed

    区分position:relative; position:absolute; position:fixed 对于position:relative; position:absolute; posit ...

  5. position:relative 与 position:absolute

    position 有三个值,static(静态).relative(相对).absolute(绝对):由于static是所有页面元素的默认值,因此设置元素的定位类型时几乎不用这个值,除非用于覆盖之前的 ...

  6. CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制

    float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动; display: inline-block; 有些时候可以替代float实现相同的效果. positio ...

  7. CSS 相对|绝对(relative/absolute)定位系列(一)

    一.有话要说 以前写内容基本上都是:眼睛一亮--哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑 ...

  8. CSS教程:实例讲解定位Position

    http://www.missyuan.com/thread-395406-1-1.html 1. position:static 所有元素的默认定位都是:position:static,这意味着元素 ...

  9. CSS的定位 position属性的 absolute relative static fixed的区别及用法

    CSS中position一般是跟盒子结合做出效果的,浮动可以实现盒子在横向上的排列,但是如何实现在盒子上重叠另一个盒子的效果呢?就需要CSS的position来实现 position属性有四个,分别有 ...

  10. HTML之position:absolute relative static fixed的区别和理解

    HTML之position:absolute relative static fixed的区别 在理解position:absolute relative static fixed的区别时,我们先需要 ...

最新文章

  1. ScratchCardView:刮刮卡视图组件
  2. Microbiome:南土所梁玉婷组-稻田土壤产甲烷菌的共存模式
  3. cocos2d-x 弹出对话框
  4. 计算机组成要素六:编译器 语法分析器
  5. React 新特性 Hooks 讲解及实例(四)
  6. 月收入不足三千的人,每月的开销都是怎样的?
  7. iOS 使用mp4v2合成的视频注意事项
  8. Newtonsoft 转换json
  9. 图片php木马制作教程,图片木马制作大法
  10. 界面清爽的SNS社交网络系统源码 PHP+MySQL(已整合IM聊天系统)
  11. 《炬丰科技-半导体工艺》 基于光电化学蚀刻技术的 GaN 微结构表面电荷光刻
  12. speedoffice(word)如何插入超链接
  13. 流程图设计(泳道图 | 任务流程图 | 页面流程图)
  14. python对数据进行分组怎么实现_Python--DataFrame分组-GroupBy
  15. 为什么看起来不是很复杂的网站,淘宝、腾讯却需要大量顶尖高手来开发?
  16. sass 运算符的使用 和常见的基本函数
  17. 统计学习理论(SLT)与支持向量机(SVM)
  18. JS新增基本数据类型--BigInt
  19. java curator_使用curator实现选举
  20. 阿里实人认证java_GitHub - lap888/react-native-face-aliverify:      基于阿里金融级实人认证sdk封装分享...

热门文章

  1. WeeklyBlogging_20100722
  2. Linux之磁盘管理,分区
  3. 树状数组 区间update/query
  4. 索引初识一 MySql
  5. Android 使用摄像头拍照
  6. invalidate
  7. Liunx中进程和计划任务管理
  8. Copying Files
  9. Oracle 11g r2 安装
  10. Zabbix实现微信告警