css position

.xx {

    position:relative;

    top:100px;

}

相对于自己在界面的正常位置,进行相对位移;所占的界面空间依然在原来的位置,也就是说在它下面的元素位置不会改变;

.xx {

position:absolute;

top:100px;

}

相对于父元素进行绝对定位;空间使用新定位的空间位置;

注:如果父元素设置position:relative 就以父元素为参考点,反之以body为参考点。

可以在这里 W3School在线测试工具 V2 感受下

推荐阅读更多精彩内容

  • CSS的position总是属性很容易让人弄混~ 为了仔细区别它们,所以今天总结一下CSS的position属性~...
    fehysunny阅读 2,381评论 0 7
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,525评论 1 91
  • 可能的值:absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的...
    青春前行阅读 156评论 0 0
  • position属性干嘛的? 定位的。绝对定位,相对定位 如何定位? 举个例子 这个结果如下。可以看到距离左侧,上...
    鸭梨山大哎阅读 466评论 0 2
  • 原文地址:http://luopq.com/2015/11/15/css-position/ position是C...
    IT程序狮阅读 7,315评论 0 15
  • 躯壳的我要看得破,则万有皆空而其心常虚,虚则义理来居; 性命的我要认得真,则万理皆备而其心常实,实则物欲不入。 我...
    吹泡泡的猫阅读 270评论 0 0
  • try ... catch ... finally 当代码块被try { ... }包裹的时候,就表示这部分代码执...
    _我和你一样阅读 138评论 0 0
  • 怎么说, 陪了我有五年的小黄伞终于在这个阴郁的雨天里寿终正寝了。 一个人拎着伞慢条斯理踱回家。 ...
    念力陆拾阅读 158评论 0 1
  • 大家都知道流程图在工作中用到很多,流程图能让你在演讲中直接展示,让别人一眼看到就懂了,很清晰的展示你的内容,那么流...
    仰望_8a79阅读 275评论 0 0
  • Sir这两天的朋友圈,被各种出国游刷屏了。 呵呵。Sir一点不羡慕(真实原因是绑在公司要给你做更新)。 在去年国庆...
    Sir电影阅读 2,595评论 11 107