之前对于absolute和relative不了解，现在整理

先设置relative再设置absolute

因为父不设置relative 那么子会向上寻找祖先元素,看是否设置relative.如果有则相对于设置的relative来定位,如果没有,那么就相对于body窗口来定位.因此,只要设置absolute一般都是相对父亲来定位

relative 是父

absolute 是子

学习总结relative和absolute的更多相关文章

  1. css案例学习之relative与absolute

    代码 <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

  2. 【学习笔记】HTML position(static、fixed、relative、absolute)

    [本文转载] position的四个属性值:static.fixed.relative.absolute 下面分别讲述这四个属性:<div id="parent">   ...

  3. 细谈position属性:static、fixed、relative与absolute

    学习WEB有些时日了,对DOM中的定位概念有些模糊,特地花了一个下午的时间搜资料.整理写下这篇随笔. 首先,我们要清楚一个概念:文档流. 简单的讲,就是窗体自上而下分成一行一行,并在每行中按照从左到右 ...

  4. 关于relative和absolute的总结

    对于定位这个性质我原理上来说自己是明白的,但是在实践的过程中,总会出现各种稀奇古怪的情况,加relative或是absolute就可以解决,但是遇到这些情况总是不明白为什么!!!难道是脑容量太小的原因 ...

  5. relative 和 absolute

    relative总是相对于其最近的父层 absolute总是相对于其最近的定义为relative或absolute的父层

  6. position中多次用到了relative和absolute，能不能具体介绍一下这两者的区别？

    position中多次用到了relative和absolute,能不能具体介绍一下这两者的区别? 一个是相对定位,一个是绝对定位. absolute生成绝对定位的元素,相对于 static 定位以外的 ...

  7. relative和absolute的效果

    我对这样几个效果不是特别理解: 1.float的效果: 就是搞不清楚我想要什么效果的时候可以将某个标签设置为float,一直没总结出什么规律. 2.relative和absolute的效果: 也是不清 ...

  8. [转]关于position 的 static、relative、absolute、fixed、inherit

    本文转自:http://www.56770.com/faq/list/?id=410 position 有五个值:static.relative.absolute.fixed.inherit. sta ...

  9. relative、absolute和float

    relative.absolute和float   position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bo ...

随机推荐

  1. php web 信息采集

    <?php /** * 可以灵活配置使用的采集器 * 作者:Rain * 创建时间:2015-02-03 15:17:30 * 版本信息:V1.0 */ //////////////////// ...

  2. GetStoredProcCommand和GetSqlStringCommand的区别

    原文:http://www.ithao123.cn/content-4004602.html http://hi.baidu.com/847270942/blog/item/c224dd557ff74 ...

  3. windows下多字节和宽字节转换

    先简单说下什么是多字节和宽字节. 多字节是指使用多个字节(1-3)表示一个字符.比如gbk使用英文占一个字节,中文占2个,这个就是多字节了.utf-8是使用1-3个字节表示字符.还有big5等等. 宽 ...

  4. 深入jQuery中的data()

    引入 data函数在jQuery中看起来很不起眼, 就像沙滩上一颗平凡的沙子, 但仔细一瞅, 却惊讶的发现data是jQuery中无比重要的一环, 甚至jQuery中各种事件都基于此. data有什么 ...

  5. grunt安装与运行

    用grunt前,需要先安装nodejs.因为grunt依赖于nodejs.nodejs的安装可以参照我的博客里头的nodejs的下载,安装与测试.   第一步:安装grunt-CLI 注意你的电脑要联 ...

  6. XtraBackup安装

    1.从官网下载XtraBackup2.4.4. percona-xtrabackup-24-2.4.4-1.el6.x86_64.rpm 2.安装依赖包 yum -y install perl per ...

  7. oracle 几个不常用的关键字

    ntile (n)是分析函数,n是吧窗体的数据分成几组. sys_connect_by_path 用来列转行 connect_by_isleaf 判断层级查询是否为叶子节点. siblings 用来层 ...

  8. HRS（CRLF Injection）

    [HRS(CRLF Injection)] CRLF是”回车 + 换行”(\r\n)的简称.在HTTP协议中,HTTP Header与HTTP Body是用两个CRLF分隔的,浏览器就是根据这两个CR ...

  9. photoshop cs5 key

    序列号: 1330-1164-2870-9234-4243-7879 1330-1027-8489-4513-0233-4890 1330-1176-2865-0373-1551-0175 1330- ...

  10. python之路——面向对象（进阶篇）

    面向对象进阶:类成员.类成员的修饰符.类的特殊成员 类成员 类成员分为三大类:字段.方法.属性 一.字段 静态字段 (属于类) 普通字段(属于对象) class City: # 静态字段 countr ...