1、默认不写position的话，值为static。

2、相对定位：相对于元素自己本身的位置偏移，虽然位置偏移，但元素本身占据的空间并不释放。

3、绝对定位：相对于离它最近的，position不为static的父元素的位置偏移。元素本身占据的空间释放掉。

比如

<body>

<div id="div1" style="position:relative;">

<div id="div2">

<div id="div3" style="position:absolute;">

</div>

</div>

</div>

</body>

说明：上例中，div3的绝对定位就是相对于div1的位置而不是div2的位置。

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

  1. css中的相对定位与绝对定位

    之前说过了CSS有三种基本的布局机制:普通流.浮动和绝对定位.除非专门指定,否则所有的框都在普通流中定位.而普通流中元素框的位置由元素在HTML中的位置决定. 相对定位 相对定位实际上被看做普通流定位 ...

  2. 辛星和你彻底搞清CSS中的相对定位和绝对定位

    前面我在解读CSS中也说过了关于相对定位和绝对定位的问题.无奈还是有些童鞋表示迷茫,于是另开一篇博客,来具体解读相对定位和绝对定位.希望可以以我的点点星光,让后来者少走弯路. 所谓相对定位,就是设置为 ...

  3. CSS中的相对定位和绝对定位

    1.元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的, 使用相 ...

  4. css中的相对定位与绝对定位的区别

    1.绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是相对 ...

  5. css之position相对定位和绝对定位

    一.position的四个值:static.relative.absolute.fixed. 绝对定位:absolute和fixed统称为绝对定位 相对定位:relative 默认值:static 二 ...

  6. CSS网页中的相对定位与绝对定位

    在CSS中有这样的一个指令:(position),在DreamWeaver中文版中翻译为“定位”,常用的属性有两个:relative(相对)与 absolute(绝对).有很多朋友对这条指令的用法还是 ...

  7. div中的相对定位与绝对定位

    1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设置垂直或水平位置,让这个元素“相对于”它的原始起点进行移动.(再一点,相对定位时,无论是否 ...

  8. CSS定位：相对定位、绝对定位和固定定位（relative absolute fixed）

    相对定位:position:relative; 不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可通过z-index进行层次分级. 绝对定位:position:a ...

  9. 遮罩层中的相对定位与绝对定位(Ajax)

    前提:公司最近做的一个项目列表,然后点击项目,出现背景遮罩层,弹出的数据框需要异步加载数据数据,让这个数据框居中,搞了两天终于总算达到Boss满意的程度,做了半年C/S,反过来做B/S,顿时感到技术还 ...

随机推荐

  1. php中的后期静态绑定

    后期静态绑定PHP手册 使用的保留关键字: static 定义: static:: 不再被解析为定义当前方法所在的类,而是在实际运行时计算的.也可以称之为"静态绑定",因为它可以用 ...

  2. 任务调度的几种Java实现

    Timer 使用java.util.Timer是最简单的一种实现任务调度的方法,直接上栗子

  3. 【.Net】Thread.Start()与ThreadPool.QueueUserWorkItem()的区别

    百度搜到的靠前的几篇文章,都是写了两种API的使用实例,但并没有说清两者的具体差别. 直接上stackoverflow搜才是正确的姿势.(想上谷歌,然而十/九_大|期间VPN各种被墙,就很气) 参考: ...

  4. Android——shape和selector和layer-list的（详细说明 转）

    <shape>和<selector>在Android UI设计中经常用到.比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到<shape> ...

  5. CPP_封装_继承_多态

    类的三方法:封装,继承,多态.封装:使用一整套方法去创建一个新的类型,这叫类的封装.继承:从一个现有的类型基础上,稍作改动,得到一个新的类型的方法,叫类的继承.多态:当有几个不同的子类对象时,对象调用 ...

  6. RequireJS模块化之循环依赖

    如果你定义一个循环依赖关系 (a 依赖b 并且 b 依赖 a),那么当b的模块构造函数被调用的时候,传递给他的a会是undefined. 但是b可以在a模块在被引入之后通过require(‘a’)来获 ...

  7. Java8中list转map

    第一种: 取list中某2个字段作为Map的K,V public Map<Long, String> getIdNameMap(List<Account> accounts) ...

  8. sqoop 兼容性问题

    --direct 只支持mysql 5.0 + 和postgresql 8.3+(只是import) jdbc的jar包需要放在$SQOOP_HOME/lib目录下 mysql zeroDateTim ...

  9. vs自己主动生成的WebService配置文件在部署到IIs6后，服务调用失败的解决方法

    近日.在项目中须要引用java公布的WebService,加入服务引用后,调用一切正常. 配置例如以下: <system.serviceModel> <bindings> &l ...

  10. Ubuntu中Samba的安装配置和使用

    Samba服务在Ubuntu服务器版本中默认并没有安装. 1. Samba软件包的安装 使用源安装,在终端中输入如下命令: #sudo apt-get install samba#sudo apt-g ...