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. (转载) 从0开始搭建SQL Server AlwaysOn 第四篇（配置异地机房节点）

    这一篇是从0开始搭建SQL Server AlwaysOn 的第四篇,这一篇开始搭建异地机房节点 注意点1 注意异地节点最好至少有2个AG节点,否则在本地节点进行手动故障转移的时候会出现仲裁警告,提示 ...

  2. ES 基础理论 配置调优

    一.简介 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasticsearch是用Java开发的,并作为 ...

  3. Sudoku（简单DFS）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5547 数据比较少,直接暴力DFS,检验成立情况即可 AC代码:但是不知道为什么用scanf,print ...

  4. 【Python】安装MySQLdb模块centos 6.1 宝塔Linux面板 MySQL5.6

    [Python]安装MySQLdb模块centos 6.1 宝塔Linux面板 MySQL5.6 总之是各种坑 先说一下,宝塔安装在centos 6.1 i368 也就是32位系统上的方法 https ...

  5. 部署Django到云服务器（centos+nginx+mysql+uwsgi+python3）【操作篇（2）】

    接上篇操作篇(1):https://blog.csdn.net/jacky_zhuyuanlu/article/details/82880612 (七)创建Django项目 (1)建立文件夹,存放网站 ...

  6. PHP var_dump() 函数

    var_dump() 函数用于输出变量的相关信息 <?php $b = 3.1; $c = true; var_dump($b, $c); ?> 输出 float(3.1) bool(tr ...

  7. SpringData ：下划线的那些破事

    今天写一个查询语句的时候,报错如下 org.springframework.beans.factory.BeanCreationException: Error creating bean with ...

  8. HTML Entity

    1.1 介绍 在编写HTML页面时,需要用到"<".">"."空格"等符号,直接输入这些符号时,会错误的把它们与标记混在一起,非 ...

  9. mac环境使用python处理protobuf

    安装 brew install protobuf 然后再安装protobuf需要的依赖 brew install autoconf automake libtool 验证是否安装成功 protoc – ...

  10. 用java将简单的word文档换成pdf文档

    用java将简单的word文档换成pdf文档的方式很多,因为很多都没有实际测试过,所以这里就先泛泛的说一下 整体上来看分两种: 1.纯java代码实现,有很多优秀的开源软件可以用,比如poi,itex ...