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. LightOJ - 1297 - Largest Box(数学）

    链接: https://vjudge.net/problem/LightOJ-1297 题意: In the following figure you can see a rectangular ca ...

  2. K Edit Distance

    Description Given a set of strings which just has lower case letters and a target string, output all ...

  3. memorization-根据输入重新计算render的数据

    在实际开发过程中,经常遇到根据props和state变化,重新计算“渲染阶段”需要的数据的情况. 如:根据输入的值实时过滤select列表,或者表格数据(查询过滤). 问题特点: 1. 每次渲染都会调 ...

  4. C# 线程小结

    进程与线程 什么是进程? 当一个程序开始运行时,它就是一个进程,进程包括运行中的程序和程序所使用到的内存和系统资源. 而一个进程又是由多个线程所组成的. 什么是线程? 线程是程序中的一个执行流,每个线 ...

  5. element-ui upload上传组件问题记录

    element-ui upload上传组件遇到的问题

  6. Python之☞网络编程中一些概念问题(未完)

    :::一些名词的解释::: 网络: 网络是辅助双方能够连接在一起的工具,使用网络的目的,为了联通多方然后进行通讯,能够让软件在不同的电脑上运行,相互传输数据. 网络协议: 约定俗成的,没有理由. TC ...

  7. Large Kernel Matters —— Improve Semantic Segmentation by Global Convolutional Network（GCN全局卷积网络）

    作者认为语义分割的两个挑战是分类和定位,而这两个挑战又是比较对立的.对于分类问题,模型需要有变形和旋转不变形,而对于定位问题,模型有需要对变形敏感. 提出的GCN遵循两个主要原则: 1.对定位问题,模 ...

  8. pyinstaller在64位系统下打包32位程序

    使用环境说明:win10 64位,已安装python3.6-64位版本 遇到的问题:win10 64位打包成exe文件后,不能在32位系统运行 需求:使用python打包生成exe文件,win64位和 ...

  9. JVM常量的含义与反编译助记符详解

    1.定义一个常量 public class MyTest2 { public static void main(String[] args) { System.out.println(MyParent ...

  10. windows下更改Apache以fastcgi方式运行php

    Apache 默认 apache2handler 方式运行处理php. 下面说切换方法: 1.下载fastcgi模块,打开https://www.apachelounge.com/download/选 ...