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. <黑天鹅>读书笔记

    书在这里 不要关注可能性,而要关注结果 不要迷信那些估值和行业发展研究文字,因为所有大家看得到的模型和研究报告都是有关白天鹅的,而你的命运或许实际掌握在黑天鹅那里 你不知道的事比你知道的事有意义 你可 ...

  2. Install CasperJS on Windows

    Phantomjs installation additionsAppend ";C:\phantomjs" to your PATH environment variable. ...

  3. Redis提供的持久化机制（一）

    Redis提供的持久化机制 redis是一个内存数据库,也就是说它的所有的数据都是保存在内存中的,而内存中的数据当程序结束时就会消失,所以我们要想办法把内存中的数据写到磁盘中.当程序异常退出或者正常退 ...

  4. CreateMutex和WaitForSingleObject组合的有关问题

    CreateMutex和WaitForSingleObject组合的问题在网上看见一个dll的代码,其中有这样几行 case   DLL_PROCESS_ATTACH:   ........ hmut ...

  5. Java后端，应该日常翻看的中文技术网站<转>

    你还在学习吗? 1.内容生产者 InfoQ中文技术第一站,佩服霍老板,真金白银地为中国程序员们生产内容. ImportNew专门面向Java的内容生产者兼聚合者,偶然也有些面向入门的小白文. 并发编程 ...

  6. [开发笔记]-实现winform半透明毛玻璃效果

    亲测win7下可用,win8下由于系统不支持Aero效果,所以效果不是半透明的. 代码: 博客园插入不了代码了..... public partial class Form1 : Form { int ...

  7. Java编程的逻辑 (66) - 理解synchronized

    ​本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http: ...

  8. sqoop 兼容性问题

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

  9. android开发(40) 初试 Volley - GoogleI02013上的“快速，简单的网络通讯库”

    什么是Volley Google I/O 2013上,Volley发布了.Volley是Android平台上的网络通信库,能使网络通信更快,更简单,更健壮.这是Volley名称的由来: a burst ...

  10. 【html】关于锚点的一些事

    今天修改公会系统,有用到锚点对页面位置进行控制,结果碰到了一些问题,通过查询相关资料解决了,在这里总结下. 两种方法跳转到锚点: 1.给锚点添加 name 属性和 id 属性.一般只要加 name 就 ...