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. C# DIctionary：集合已修改，可能无法执行枚举操作

    C#中直接对集合Dictionary进行遍历并修改其中的值,会报错,如下代码就会报错:集合已修改;可能无法执行枚举操作.代码如下 public void ForeachDic() { Dictiona ...

  2. adi 程序烧写

    3.2 U-Boot Console Output Here we need set up minicom to open target board serial console. sudo mini ...

  3. Linux 系统内核空间与用户空间通信的实现与分析-NETLINK (转载)

    Linux中的进程间通信机制源自于Unix平台上的进程通信机制.Unix的两大分支AT&T Unix和BSD Unix在进程通信实现机制上的各有所不同,前者形成了运行在单个计算机上的Syste ...

  4. Android——关于PagerAdapter的使用方法的总结（转）

    PagerAdapter简介 PagerAdapter是android.support.v4包中的类,它的子类有FragmentPagerAdapter, FragmentStatePagerAdap ...

  5. Android——浅谈HTTP中Get与Post的区别（转）

    原文地址:http://network.51cto.com/art/201407/446434.htm Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DEL ...

  6. 15.04.14-登录之后刷新AntiForgeryToken

    用MVC做网站的时候,碰到这样一种情况: 用户可以匿名访问某页面A,页面可以填写,然后保存数据.访问可以匿名,但是提交的时候会提示登录,然后用户登录之后才能保存. 这里面的问题 1. 用户匿名访问页面 ...

  7. 网页QQ弹出

    <script language="javascript"> function cdyht(){ window.location.href='tencent://Mes ...

  8. 首部讲Python爬虫电子书 Web Scraping with Python

    首部python爬虫的电子书2015.6pdf<web scraping with python> http://pan.baidu.com/s/1jGL625g 可直接下载 waterm ...

  9. UI设计， 弹出对话框 设计（区分强调按钮和普通按钮，给用户一个 正向建议的强调按钮）

    在UI设计时,经常会需要 设计 弹出对话框,以下是个样式设计: 0.标准对话框 说明 Title space : 标题区 contents space : 内容区 function space: 功能 ...

  10. windows下安装和配置多个版本的JDK

    https://jingyan.baidu.com/article/47a29f2474ba55c015239957.html 如何在windows下安装和配置多个版本的jdk,本文将带你在windo ...