看了几个讲解定位的博客,觉得还不错,分享之:

博客一:http://blog.sina.com.cn/s/blog_4bcf4a5e010008o0.html

文章中,主要需要参考的有两点:

1,相对定位

请注意,相对定位并没有脱离文档流,“虽然表现区脱离了原来的文本流,但是在文本流中还还有此相对定位的‘老窝’。这点要特别注意,因为在实际应用中如果相对定位的位移数值过大,那么原有的区域就会形成一块空白。”

2,绝对定位

“如果需要这个绝对定位要跟着网页移动,而并且是因定在网页的某一个固定位置。要实现这种效果基本方式就是为这个绝对定位的父级设置为相对定位或是绝对定位。那么绝对定位的坐标就会以父级为坐标起始点。” 特别需要注意的是,这里是父级块的padding左上边缘点为坐标起始点。也就是下图中的A点。

博客二:http://www.divcss5.com/rumen/r403.shtml

1,绝对定位与float浮动不能同时使用,比如一个大盒子里有的是绝对定位,有的是使用css float浮动定位,这样IE6浏览器将不会显示改大对象里的这些绝对定位与相对定位,这也算是IE6 CSS HACK吧,注意不要混用即可。

CSS中相对定位与绝对定位的更多相关文章

  1. css 中相对定位和绝对定位

    1. css中定位机制有三种: 标准文档流, 浮动, 绝对定位 2. 绝对定位就属于第三种定位, 用到position属性, 下面就是具体设置 相对定位: 相对于自身原有位置(就是普通流的时候)进行偏 ...

  2. css中相对定位和绝对定位

    相对定位: #box_relative { position: relative; left: 30px; top: 20px; } 绝对定位: #box_relative { position: a ...

  3. 详解CSS的相对定位和绝对定位

    CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...

  4. Web—12-详解CSS的相对定位和绝对定位

    CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...

  5. 详解CSS的相对定位和绝对定位(讲得很详细)

    详解CSS的相对定位和绝对定位 CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left ...

  6. css定位:相对定位、绝对定位、固定定位的区别与特性

    css定位:相对定位.绝对定位.固定定位的区别与特性 原文地址:http://www.qingzhouquanzi.com/106.html css定位常用的有以下三种: 使用了定位的共同特性: 这三 ...

  7. 详细讲解CSS中相对定位relative和绝对定位absolute

    很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对 定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对 ...

  8. h5整理--详解css的相对定位和绝对定位

    浏览器默认状态下position的属性默认值是static也就是没有定位,元素出现在正常的文档流中,这个时候给元素设置的left,right.bottom.top这些偏移属性是没有效果的,不会生效: ...

  9. css position相对定位与绝对定位彻底搞懂

    定位position position本身就有给...定位的意思 position属性的值: static ---默认值 relative ---相对定位 absolute ---绝对定位 fixed ...

随机推荐

  1. Intent 匹配规则

    1.在AndroidManifest.xml中可以为 每个 Activity,Service 设置多个Intent-Filter; 在系统启动和程序安装之后,android会收集AndroidMani ...

  2. [问题2014A06] 复旦高等代数 I(14级)每周一题(第八教学周)

    [问题2014A06]  若 \(n\) 阶实方阵 \(A\) 满足 \(AA'=I_n\), 则称为正交矩阵. 证明: 不存在 \(n\) 阶正交矩阵 \(A,B\) 满足 \(A^2=cAB+B^ ...

  3. 【树莓派】树莓派移动网络连接(配置4G网卡)

    1.识别上网卡 使用命令lsusb,如果能够识别则可以继续往下. 2.安装网卡驱动程序 上网卡一般都会带有2个功能,一个是虚拟光驱,用来安装驱动程序:另一个是进行网络连接的modem. 在Linux下 ...

  4. hibernate中设置BigDeCimal的精度

    @Column(precision = 12, scale = 2) 在MySQL数据库中的精度为:

  5. 【OOAD】OOAD概述

    什么是面向对象? OOP:面向对象编程(Object Oriented Programming,OOP,面向对象程序设计)是一种计算机编程架构.OOP 的一条基本原则是计算机程序是由单个能够起到子程序 ...

  6. D3.js 力导向图

    花了大半天看了一个八十几行的代码..心累 力导向图是之前就有画过很多次的东西,但是这次的代码看上去很陌生,然后发现是D3更新了4.0.... 先贴代码 var svg = d3.select(&quo ...

  7. 浏览器html页面乱码问题分析

    直接访问某html文件,浏览器显示编码是正常的,页面通过<meta charset="UTF-8">指定了编码方式,该文件存储编码也是utf8. 通过配置的org.sp ...

  8. Spirng中Mongodb中write-concern的解释

    Spring在插入数据库时没有返回状态配置:write-concern获取异常<beans xmlns="http://www.springframework.org/schema/b ...

  9. 【xsy1019】小A的树论

    题意 三种操作: ①区间增值 ②某一个点换父亲 ③求子树和 \(1\leq n\leq 100000\) 分析 Splay维护dfn序. 小结 (1)使用Splay,通常要在Splay的两端各添加一个 ...

  10. 解决Mac下MySQL登录问题

    sudo /usr/local/mysql/support-files/mysql.server stop sudo mysqld_safe --skip-grant-tables mysql-u r ...