在CSS中关于定位的内容是：
position:relative | absolute | static | fixed
    static(静态) 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级，这是默认值。
    relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。
    absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
    fixed（固定定位） 这里所固定的参照对像是可视窗口而并非是body或是父级元素，其总是固定在浏览器窗口的某个位置，并且不受滚动的影响，是绝对的坐标定位。可通过z-index进行层次分级。
注：
CSS中定位的层叠分级：z-index: auto | namber;

auto 遵从其父对象的定位
namber  无单位的整数值。可为负数，默认值为0，越大越靠上，值大的元素会覆盖住值小的元素。

分析：
  1. div1和div2由于是absolute布局，其位置完全由left和top来决定，不受父元素的padding的影响，完全脱离文档流
  2. div3和div4是relative布局，其位置除了由left和top来决定外，还受父元素的padding以及文档流的影响，比如，div4就受到了div3的影响，尽管其top和div3一样都是0，但是却显示在div4的下面，因为div3在文档流中，div4只能跟着文档流，排在div3的下面
  3. div5是fixed布局，其位置始终是左上角，即使浏览器滚动，它还是固定在左上角
  4. 关于z-index，如果不写则默认值是0，上面的例子很好的说明了z-index的作用
  5. absolute布局，其参考点是最近的具有position属性的元素，如果本例中将main div的position属性去掉的话，整体布局就会不一样，这个时候，div1和div2的参考点是body
  1. <html><head>
  2. <style type="text/css">
  3. body{margin:0px;padding:0px;line-height:100%;}
  4. div
  5. {
  6. background-color:rgb(159, 206, 159);
  7. width:95px;
  8. height:95px;
  9. margin: 0px 0px 1px 1px;
  10. padding:0px;
  11. /*display:inline-block;*/
  12. letter-spacing:1px;
  13. /* only for ie*/
  14. *display:inline;
  15. *zoom:1;
  16. border:1px solid #ffffff;
  17. border-radius:5px;
  18. -moz-border-radius:5px; /* Old Firefox */
  19. opacity:1;
  20. text-align:center;
  21. color:white;
  22. }
  23. #main{width:400px;height:300px;}
  24. </style>
  25. </head>
  26. <body>
  27. <div id="main" style="
  28. position: relative;
  29. margin: 50px;
  30. padding: 80px;
  31. ">
  32. <div id="div1" style="
  33. position: absolute;
  34. left: 83px;
  35. top: 0px;
  36. background-color: rgb(199, 219, 50);
  37. ">div1 absolute</div>
  38. <div id="div2" style="
  39. position: absolute;  left: 0px;
  40. top: 90px;
  41. background-color: rgb(1, 214, 35);
  42. z-index:10;
  43. ">div2 absolute z-index<br/>:10</div>
  44. <div id="div3" style="
  45. position: relative;  left: 0px;
  46. top: 0px;
  47. background-color: rgb(23, 178, 238);
  48. z-index:11
  49. ">div3 relative z-index:11</div>
  50. <div id="div4" style="
  51. position: relative;  left: 0px;
  52. top: 0px;
  53. background-color: rgb(23, 178, 238);
  54. z-index:0;
  55. ">div4 relative z-index:0</div>
  56. <div id="div5" style="
  57. position: fixed;  left: 10px;
  58. top: 10px;
  59. background-color: rgb(229, 122, 238);
  60. ">div5 fixed</div>
  61. </div>
  62. </body></html>
请参见：http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html

HTML中的布局方式：absolute、relative、fixed、static的更多相关文章

  1. position:absolute/relative/fixed小结

    1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏 ...

  2. css总结1：position定位:absolute/relative/fixed

    1 [Positioning(定位)] Positioning作用:指定了元素的定位类型.position包括四个值:static,relative,fixed,absolute. css定位解析:元 ...

  3. Java中CardLayout布局方式的应用

    import java.awt.CardLayout; import java.awt.Color; import java.awt.Container; import javax.swing.JBu ...

  4. 【java】浅析java组件中的布局管理器

    这篇博文笔者介绍一下java组件中,常用的布局管理器.java组件中的布局方式有好几十种,所有的这些布局管理器都实现了java.awt.LayoutManager接口.接下来笔者介绍一下常用的5种布局 ...

  5. Android开发之基本控件和详解四种布局方式

    Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...

  6. Android-基本控件和详解四种布局方式

    转自:https://www.cnblogs.com/ludashi/p/4883915.html 一.常用基本控件 1.TextView 看到Android中的TextView, 我不禁的想到了iO ...

  7. C#中Dictionary排序方式

    转载自:https://www.cnblogs.com/5696-an/p/5625142.html 自定义类: https://files.cnblogs.com/files/xunhanliu/d ...

  8. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  9. css中position属性(absolute|relative|static|fixed)概述及应用

    position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...

随机推荐

  1. 【Java虚拟机】运行时数据区

    Java在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区域.这些区域都有各自的用途.创建和销毁的时间,有一些是随虚拟机的启动而创建,随虚拟机的退出而销毁,有些则是与线程一一对应,随 ...

  2. Job for vsftpd.service failed because the control process exited with error code

    # systemctl start vsftpd.serviceJob for vsftpd.service failed because the control process exited wit ...

  3. 转:CMake安装和使用

      CMake是一个跨平台的安装(编译)工具,可以用简单的语句来描述所有平台的安装(编译过程).他能够输出各种各样的makefile或者project文件,能测试编译器所支持的C++特性,类似UNIX ...

  4. iOS 音乐播放器之锁屏效果+歌词解析

    概述 功能描述:锁屏歌曲信息.控制台远程控制音乐播放:暂停/播放.上一首/下一首.快进/快退.列表菜单弹框和拖拽控制台的进度条调节进度(结合了QQ音乐和网易云音乐在锁屏状态下的效果).歌词解析并随音乐 ...

  5. java项目中classpath路径到底指的是哪里？

    本文转自:http://blog.csdn.net/javaloveiphone/article/details/51994268 1.src不是classpath, WEB-INF/classes和 ...

  6. QQ网页链接打开本地QQ.exe原理

    一.观察现象 QQ推广上有相关文档 http://shang.qq.com/v3/widget.html 新建一个html,点击链接就会启动本地QQ. <html> <body> ...

  7. JavaScript 设计模式之命令模式

    一.命令模式概念解读 1.命令模式概念文字解读 命令模式(Command)的定义是:用来对方法调用进行参数化处理和传送,经过这样处理过的方法调用可以在任何需要的时候执行.也就是说该模式旨在将函数的调用 ...

  8. IOS 进阶之 WKWebView

    前言 Xcode8发布以后,编译器开始不支持IOS7,所以很多应用在适配IOS10之后都不在适配IOS7了,其中包括了很多大公司,网易新闻,滴滴出行等.因此,我们公司的应用也打算淘汰IOS7. 支持到 ...

  9. DirectoryEntry配置IIS7出现ADSI Error：未知错误(0x80005000) [转]

    一.错误情况 环境:win7+iis7.0 DirectoryEntry配置IIS7出现如下错误 或者是 下面一段代码在IIS6.0下运转正常,但IIS7.0下运转会出错: System.Direct ...

  10. Python学习笔记011——内置函数eval()

    1 描述 eval()  函数用来执行一个字符串表达式,并返回表达式的值 2 语法 原文 eval(expression[, globals=None[, locals=None]]) express ...