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. Backpack V

    Description Given n items with size nums[i] which an integer array and all positive numbers. An inte ...

  2. grep命令选项

    -c:只输出匹配行的计数. -I:不区分大 小写(只适用于单字符). -h:查询多文件时不显示文件名. -l:查询多文件时只输出包含匹配字符的文件名. -n:显示匹配行及 行号. -s:不显示不存在或 ...

  3. PHP流程控制之分支结构switch语句的使用

    分支结构switch语句的使用 还记得我们最开始讲了这么一个故事: 王同学家里头特别有钱,所以他的行程方式和正常人的又有些不一样. 他的出行方式呢有6种,如下: 1,司机开车2,民航3,自己家的专机4 ...

  4. flutter ListView 页面滚动组件

    ListView class A scrollable list of widgets arranged linearly. ListView is the most commonly used sc ...

  5. Spring入门（二）——DI

    1. DI Dependency Injection,依赖注入.当对象里有属性或对象的时候,就需要为这些属性或对象赋值 2. 流程 这里介绍两种方式 set方法 注解方式 2.1 set方法 Bean ...

  6. [代码审计]php反序列化漏洞

    0x01 php面向对象简介 对象:可以对其做事情的一些东西.一个对象有状态.行为和标识三种属性. 类:一个共享相同结构和行为的对象的集合. 每个类的定义都以关键字class开头,后面跟着类的名字. ...

  7. python提取计算结果的最大最小值及其坐标

    我们在fluent当中后处理的时候,可以通过fluent本身得到某些物理量的最大值和最小值,但是我们却无法确定这些最大值和最小值的具体位置.其实我们可以将求解数据导出以后,借助python求得最大值和 ...

  8. 解决tecplot中壁面速度不为0的问题

    当直接将fluent的.cas文件和.dat文件导入tecplot中进行后处理的时候,我们会发现,壁面速度不为0的情况(见上图). 出现这样问题的原因为:fluent的计算数据是存储在每个单元的中心位 ...

  9. ICEM-蜗壳

    原视频下载地址:https://yunpan.cn/cY8XxpyLN4QaE  访问密码 a792

  10. Spring boot 去除URL 里的 JSESSIONID

    方法一 application.yml 里设置 server: port: 80 servlet: session: tracking-modes: cookie cookie: http-only: ...