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. 元组（Tuple）

    元组(Tuple) 笛卡尔积中每一个元素(d1,d2,…,dn)叫作一个n元组(n-tuple)或简称元组. 元组是关系数据库中的基本概念,关系是一张表,表中的每行(即数据库中的每条记录)就是一个元组 ...

  2. js读取本地txt文件中的json数据

    list.txt内容 [ {"optionKey":"1", "optionValue":"Canon in D"}, ...

  3. C语言 · 分苹果

    算法提高 分苹果   时间限制:1.0s   内存限制:256.0MB      问题描述 小朋友排成一排,老师给他们分苹果. 小朋友从左到右标号1..N.有M个老师,每次第i个老师会给第Li个到第R ...

  4. JAVA字符串怎么转换成整数

    首先你要确定你的字符串可以转换为int类型的,比如说: String s = "123"; 如果String s = "abc";则转换时会报错! 需要的包是& ...

  5. 主流HTML5游戏框架的分析和对比

    本文主要选取了Construct2.ImactJS.LimeJS.GameMaker.CreateJS.lycheeJS.Crafty.three.js.melonJS.Turbulenz.Quint ...

  6. log4写完日志不会自动释放

    今天想做个日志记录功能.网上查了下.决定使用log4net 来做. 但是最发现在写日志的时候.会一直占用当前的日志文件.当你想查看的时候会提示另一个进程占用了该文件. 只有到他创建下一个日志文件.然后 ...

  7. Thymeleaf select 数据回显 选中

    <select style='width: 148.15px' name="dlrlx" th:field="*{Ygdly.dlrlx}"> &l ...

  8. linux下安装jre运行环境

    上官网下载安装文件:点击打开链接 文件名:jre-8u65-linux-x64.gz安装步骤1.解压tar -xzvf jre-8u65-linux-x64.gz2.将解压后的文件放到/usr/lib ...

  9. [kafka] 005_kafka_Java_API

    1.生产者Producer 1)添加依赖 <dependency> <groupId>org.apache.kafka</groupId> <artifact ...

  10. Python 引用

    python引用python中的数值类型变量也是引用,例如: a = 100b=a那么a和b指向同一块内存但是当修改a或者b的值得时候,Python会新分配一块内存来存储新的值 python中不可变类 ...