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. Error: Java heap space

    在chd中 的hive中执行 (select count (*))  或者mr程序都报Error: Java heap space 4.io.sort.mb 的作用  排序所使用的内存数量.  默认值 ...

  2. 【WPF/WAF】使用System.Windows.Interactivity交互事件

    下载System.Windows.Interactivity.dll文件,并引入项目中(在VS项目的引用列表中可以看到).可在Nuget搜索System.Windows.Interactivity下载 ...

  3. python 全局变量的使用

    我尝试使用 类似 C 语言的方式去调用 python 的全局变量,发现不行,后经过 尝试,要使用 global 进行调用 test_num = 0; # 首先声明一个全局变量 def test_fun ...

  4. [net]netcat 做网络端口监听

    nc命令说明:https://www.cnblogs.com/nmap/p/6148306.html 如下: nc -vz -w domain/ip &> /dev/null & ...

  5. TIDB介绍 新数据库趋势

    TIDB是什么? TIDB 受谷歌Spanner和F1的论文启发的new sql数据库,这类数据库不仅具有NoSQL对海量数据的存储管理能力,还保持了传统数据库支持ACID和SQL等特性,同类数据库还 ...

  6. 12 extremely useful hacks for JavaScript

    In this post I will share 12 extremely useful hacks for JavaScript. These hacks reduce the code and ...

  7. jQuery 与 prototype 共存

    方法一: <html>   <head>     <script src="prototype.js"></script>     ...

  8. PinnedListView分析一

    分享一个Android控件,PinnedHeaderListView , 大致是像图钉一样,能够固定显示一个头部在ListView的顶部,类似于Android原版通讯录中联系人按照字母分组排列, 这个 ...

  9. 关于Unity中的光照(二)

    光源 1: 光照的本质:就是光的颜色和物体纹理的颜色的混合;2: 光源类型: 点光源,定向光源,聚光灯, 区域光源; 区域光的范围会在场景中用黄色的光显示出来; z轴是光的方向; 光的强度会随距离衰减 ...

  10. Android Service和Binder、AIDL

    1.首先理解service的作用和生命周期 由于activity如果切换,那么他就不再运行,那么我们想在玩游戏的时候听播放器中的音乐,activity就应运而生了,这是最常见的一种场景,同时servi ...