position等于absolute的时候，不一定是相对于浏览器定位，当div存在包含关系时，父div设置成relative，其中包含的div设置成absolute就是相对于该父div的了。
该文测试了下，divall（背景图）这个包裹了六个小div（背景色），并把小div在divall里依次排列，间隔是10px。
定位相关的div写在了行内样式，其他的与测试不太相关的写在了前面的style里。

父div设置了上边距和左边距，距离浏览器留了30px边距。
设置里面的第一排小div绝对定位，top都是10px，距离父div上边是10px。
第二排小div绝对定位，top都是70px。（第一排小div本身高50px，加上第一排的小div的上边距10px，加上第二排和第一排之间需要空出10px，所以是70px。）

float:设置了六个小div都是左浮动，这个浮动也是相对于父div的。
第一列的都是10px.第二列都是120px，第三列都是230px。

具体可查看本文的图示。

测试代码 ：

 <style>

  body{margin:0px;}

  #divall{margin-top:30px;margin-left:30px;width:340px;height:130px;background-image:url(./images2/bg2.png);}

  #red_div{width:100px;height:50px;background:rgba(255,0,0,0.5);border-radius:20px;text-align:center;}

  #blue_div{width:100px;height:50px;background:blue;text-align:center;}

  #red_div a{text-decoration:none;color:white;line-height:50px;font-weight:bold;}

  </style>

 </head>

 <body>

 <div id="divall" style="position:relative;">

      <div id="red_div" style="position:absolute;left:10px;top:10px;">

      <a target="_blank" href="./indextesthtmagain.html">测试html</a>

     </div>

      <div id="blue_div" style="position:absolute;float:left;left:120px;top:10px;">

      blue

      </div>

      <div id="blue_div" style="position:absolute;float:left;left:230px;top:10px;">

      blue

      </div>

      <div id="red_div" style="position:absolute;left:10px;top:70px;">

      <a target="_blank" href="./indextesthtm.html">纸张html</a>

     </div>

      <div id="blue_div" style="position:absolute;float:left;left:120px;top:70px;">

      blue

      </div>

      <div id="blue_div" style="position:absolute;float:left;left:230px;top:70px;">

      blue

      </div>

</div>

图示：

div定位relative和absolute和float测试3的更多相关文章

  1. div定位relative和absolute测试1

    div里的position定位也是比较常见的,relative是相对定位,absolute是绝对定位.如本文测试:body自带8px的margin,这里不对其进行清空.蓝色的div和红色的div分别设 ...

  2. div定位relative和absolute测试2

    之前的博文:div定位relative和absolute测试1.中,body包含了蓝色和红色div,蓝色的相对定位,相对于body向下偏移了10px位置,红色绝对定位,相对浏览器偏移了10px位置. ...

  3. relative、absolute和float

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

  4. [转]relative、absolute和float

    position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bottom和z-index属性.(默认这些属性未激活, ...

  5. CSS+DIV定位分析(relative,absolute,static,fixed)

    在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...

  6. CSS 定位 relative && absolute 问题？

    1 1 1 CSS 定位 relative && absolute 问题? 谁能解释一下,为什么div使用 relative是设置right,bottom 后,看不到div 呀,哪里多 ...

  7. css absolute和float，relative，z-index的同异

    大神占楼: 简书作者:张歆琳 http://www.jianshu.com/p/a3da5e27d22b http://www.cnblogs.com/lxblog/p/3152897.html 摘录 ...

  8. div和span、relative和absolute、display和visibility的区别

    一.div和span的区别 div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容.一般我们在网页通过div来布局定位网页中的每个区块. span是一个内联元素,没有实际意义,它的存在纯粹 ...

  9. 页面布局排版-block，inline，float，relative，absolute等

    1.span和div的区别 div是块元素(block),span是行内元素(inline): span什么事也不会做,它存在的目的在与为开发者给它所围绕的元素指定样式.div类似,不过它引入了行分隔 ...

随机推荐

  1. windbg调试托管代码 .Net clr

    现在很多的程序都是多语言混合编程的,比如我司的产品,就是用C++/.net clr混合编制的.那么当我们调试这样的程序时,一定要注意,比如有时我们只看到c++的栈和名称,而.net clr的代码确看不 ...

  2. declare/typeset

    用来生命变量的,作用完全一样. 不像C语言那样严谨的语法,变量在使用前必须声明. 但是在shell中对变量的声明要求并不高,因为shell弱化了变量的类概念,所以shell被称为弱类型语言, 声明变量 ...

  3. mysql 5.7.21, for Linux (i686) 权限配置

    配置权限参数: GRANT语法: GRANT 权限 ON 数据库.* TO 用户名@'登录主机' IDENTIFIED BY '密码' 权限: ALL,ALTER,CREATE,DROP,SELECT ...

  4. 共享库的使用（.so）文件

    1.共享库的概念 2.创建共享库命令 gcc -shared -fpci -o lib/libmath.so obj/mymath.o 具体加不加 fpci 这个要看平台支持吧支持:具体详情可以查阅 ...

  5. Firefox设置谷粉搜搜为默认搜索引擎的方法

    原文转自:http://www.gfsoso.org/119/   作者: cjx 分类: 谷粉专题 发布时间: 2014-07-09 23:10 ė 668条评论   如果使用Firefox的朋友希 ...

  6. git 导出远程特定分之

    很多时候,git clone 只是 clone 下来了 master 分支,如果想 clone 特定分支.有的时候不知如何是好. 找到了如下的命令,记录一下.以便有需要的同学可以使用. git co ...

  7. GoCN每日新闻(2019-09-24)

    1. Go 搭建的高效网页爬虫:https://creekorful.me/building-fast-modern-web-crawler/ 2. Go 时区处理:https://medium.co ...

  8. centos安装浏览器【备份】

    chrome(谷歌)  添加源:sudo wget http://repo.fdzh.org/chrome/google-chrome-mirrors.repo -P /etc/yum.repos.d ...

  9. Nginx:fastcgi_param详解

    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;#脚本文件请求的路径 fastcgi_param QUERY_STRI ...

  10. 2019 SDN上机第一次实验作业

    1. 安装轻量级网络仿真工具Mininet 先从GitHub上获取mininet源码,再输入命令进行安装,代码分别如下: git clone https://github.com/mininet/mi ...