position的默认值是static,(也就是说对于任意一个元素,如果没有定义它的position属性,那么它的position:static)

如果你想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方,应该给#demo相对定位,#sub绝对定位。

absolute是相对于自己最近的父元素来定位的,如果你不给#demo相对定位,那么#sub的绝对定位就是相对于body来定位的。

relative是相对于自己来定位的,例如:#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px。

另:relative 不脱离文档流,absolute 脱离文档流。也就是说:relative 的元素尽管表面上看到它偏离了原来的位置,但它实际上在文档流中还是没变。absolute的元素不仅位置改变了,同时也脱离了文档流。

position relative的更多相关文章

  1. 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题

    解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题   在IE6,IE7下,子元素使用position:relati ...

  2. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  3. css - position relative与display table-cell深入分析

    在很多时候,想使用 display: table; 以及其子元素使用 display: table-cell 都只是为了使用 vertical-align 这一属性.这是一个很简单的常识,但这次在项目 ...

  4. 解决td标签上的position:relative属性在各浏览器中的兼容性问题

    在css中的position属性规定了页面元素的定位类型,它有以下几个值: absolute:绝对定位,相对于static以外的第一个父元素进行定位: fixed:生成绝对定位的元素,相对于浏览器窗口 ...

  5. [转]position:relative leaves an empty space

    本文转自:http://stackoverflow.com/questions/5229081/positionrelative-leaves-an-empty-space 在使用relative进行 ...

  6. css中position:relative的真正理解

    其实话说一直以来也没真正去理解好position:relative的用法的真实意义. 我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的 ...

  7. IE7下position:relative的问题

    如果在IE7中使用position:relative属性,需要在该元素的容器上,同时给予position:relative属性.

  8. "position:relative"在IE中的Bug

    当子元素过高导致父元素出现滚动条时,它并不会像预期的那样呆在父元素里,而是浮在父元素之上,并且位置不随滚动条的移动而改变.根源就是子元素的"position:relative".目 ...

  9. 层模型--相对定位(position:relative)

    如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left.right.top.bottom属性确定元素在正常文档流中的偏移位置.相对定位完成的过程 ...

  10. [置顶] css 背景透明,文字不透明,alpha滤镜,opacity,position:relative;

    都知道,在alpha滤镜下,背景透明了,里面的文字也会跟随透明,我们可以设置内容的position为relative可以解决这个问题 但是在position为absolute这么做却没有效果,怎么解决 ...

随机推荐

  1. Python拉勾爬虫——以深圳地区数据分析师为例

    拉勾因其结构化的数据比较多因此过去常常被爬,所以在其多次改版之下变得难爬.不过只要清楚它的原理,依然比较好爬.其机制主要就是AJAX异步加载JSON数据,所以至少在搜索页面里翻页url不会变化,而且数 ...

  2. 安全体系(二)——RSA算法详解

    本文主要讲述RSA算法使用的基本数学知识.秘钥的计算过程以及加密和解密的过程. 安全体系(零)—— 加解密算法.消息摘要.消息认证技术.数字签名与公钥证书 安全体系(一)—— DES算法详解 1.概述 ...

  3. h5标签基础 表单form

    表单:收集用户信息 一. 组成: 文本框<input type="text"/> 密码框<input type="password"/> ...

  4. java 类与类之间的关系 及uml图

    类与接口之间的关系 : 继承 类与类之间的关系 :继承关系  包含关系 类与对象之间的关系 : 实例 UML 类图中类与类之间的关系: 泛化关系(generalization) 关联关系(associ ...

  5. Cookie和Session的原理图

    Cookie Session

  6. 从零开始学JavaWeb

    引言   记得上学时,有位导师说过一句很经典的话:"编程语言只是工具,最重要的是掌握思想." 笔者一直主要从事.net领域的开发工作.随着工作阅历的丰富,越来越深刻的理解当年导师说 ...

  7. 某电商网站线上drbd+heartbeat+nfs配置

    1.环境 nfs1.test.com 10.1.1.1 nfs2.test.com 10.1.1.2 2.drbd配置 安装drbd yum -y install gcc gcc-c++ make g ...

  8. Asp.Net 常用工具类---Config操作(7)

    近期工作比较忙,忙到忘记写博客(自己的借口,主要加班下班后不想动). 月初的时候,打算每两天写一篇博文,分享自己的一些心得和开发体验,无奈现在只写到第六篇,然而时间已经是20号,岁月不饶人! 总想写点 ...

  9. Android全局异常捕捉

    // 定义自定义捕捉 package com.xiaosw.test; import java.io.File; import java.io.FileOutputStream; import jav ...

  10. angularjs fileUpload

    文件上传一直是我不熟悉的地方,<a href='https://github.com/nervgh/angular-file-upload/wiki/Module-API'>官网解释的例子 ...