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. Python学习之--用户输入以及运算

    一. 用户输入:input 1. 函数input() 让程序暂停运行,等待用户输入一些文本. 2.使用int()将字符串转为数值 二.运算:+-*. 1.求模运算符 (%)将两个数相除并返回余数: 2 ...

  2. mapper.xml等资源导入的问题

    在pom.xml中的下导入如下字段 <resources> <resource> <directory>src/main/java</directory> ...

  3. VS2019输出信息到调试控制台

    System.Diagnostics.Debug.WriteLine(format, args);

  4. 记一次vue+vuex+vue-router+axios+elementUI开发（二）

    开发环境跟脚手架初始完毕后,我们开始配置axios请求后台接口   axios使用说明:https://www.kancloud.cn/yunye/axios/234845 1.本人是在脚手架中的sr ...

  5. reverse啥时候可以用

    在做历史搜索记录的时候,当你想把最新的数据放到前面,可以用到,其实就是一个数组的反转. let array=[ '周小姐','好可爱的' ] var box=array.reverse() conso ...

  6. JDBC 操作

    简单的 JDBC 操作主要有: JdbcTemplate query queryForObject queryForList update execute 简单使用如下所示. 初始化数据库 sprin ...

  7. ubuntu之路——day10.3 train/dev/test的划分、大小和指标更新

     train/dev/test的划分 我们在前面的博文中已经提到了train/dev/test的相关做法.比如不能将dev和test混为一谈.同时要保证数据集的同分布等. 现在在train/dev/t ...

  8. NGINX实现咏南跨平台中间件集群

    NGINX实现咏南跨平台中间件集群 首先要开启咏南LINUX中间件. 1)编辑usr/local/nginx/conf/nginx.conf #user  nobody;worker_processe ...

  9. 微信小程序左滑删除未操作有复位效果

    1.wxml <!--pages/test/test.wxml--> <view class="page"> <movable-area class= ...

  10. Kettle建立数据库链接报错-'MS SQL Server' driver (jar file) is installed. kettle的bug，对于12.2而言

    1.链接sql server数据库报错 错误连接数据库 [My_vm_win_sql] : org.pentaho.di.core.exception.KettleDatabaseException: ...