position ：属性规定元素的定位类型

语法： 
position : static | absolute | fixed | relative

JavaScript语法：object.style.position="absolute"

参数： 
static : 无特殊定位，对象遵循HTML定位默认规则 ，没有定位，元素出现在正常的流中

absolute : 绝对定位。相对于 static 定位以外的第一个父元素进行定位，将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。

　　　　　　而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。相对于position属性非static值的最近父级元素进行偏移，如果父级都

　　　　　　是static（文档流），则相对整个文档进行偏移。偏移后，原来的空间会被其他元素挤占

fixed:绝对定位。相对于浏览器窗口进行定位。
relative : 相对定位。相对于其正常位置进行定位，对象不能像绝对定位一样层叠，但可依据left，right，top，bottom等属性在正常文档流中相对原先对象的位                  置进行偏移。原先的位置会被其他元素挤占。

      position说明：
      设置对象的定位方式，可以让布局层容易位置绝对定位，控制盒子对象更加准确。

　　.divcss5{position:relative} 定义，通常最好再定义CSS宽度和CSS高度
　　.divcss5-a{position:absolute;left:10px;top:10px} 这里定义了距离父级左侧距离间距为10px，距离父级上边距离为10px
　　或
　　.divcss5-a{position:absolute;right:10px;bottom:10px} 这里定义了距离父级靠右距离10px,距离父级靠下边距离为10px

　　　　　　left（左）和right（右）在一个对象只能选一种定义，bottom（下）和top（上）也是在一个对象只能选一种定义。

　　　　　　

绝对定位如果父级不使用position:relative，而直接使用position:absolute绝对定位，这个时候将会以body标签为父级，使用position:absolute定义对象无论位于DIV多少层结构，都将会被拖出以<body>为父级（参考级）进行绝对定位。绝对定位非常好用，但切记不要滥用，什么地方都用，这样有时会懒得计算距离上、下、左、右间距，同时可能会造成CSS代码臃肿，更加经验适当使用，用于该使用地方。

在绝对定位时候我们可以使用css z-index定义css层重叠顺序。

同时left、right、bottom、top的数值，可以使用（Photoshop）PS切片工具获取准确的数值。

遇到以上的不规则案例布局，如果使用float、padding等浮动实现比较麻烦，但使用position绝对定位即可很好简单地实现。

　　　　width：宽度，设置对象宽度

height：高度，设置对象高度
           line-height：行高，设置文本行高
           left：设置div对象靠左距离
           right：设置div对象靠左距离
           top：设置div对象靠左距离
           bottom：设置div对象靠左距离
           background：背景，设置背景图片和颜色
           color：设置字体颜色
           font-size：设置字体大小
           font-weight：设置字体加粗

div标签：用于布局结构框架
          ul li标签：用于布局列表型数据列表
          h3标签：用于布局栏目标题

1、完整CSS代码

  1. @charset "utf-8";
  1. /* DIVCSS5-CSS初始化模板-www.divcss5.com */
  2. body, div, ul, li,h3{
  3. margin:0; padding:0;
  4. font-style: normal;
  5. font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif}
  6. /* \5B8B\4F53 代表 宋体，更多中文字体转 Unicode http://www.divcss5.com/jiqiao/j325.shtml */
  7. ol, ul ,li{list-style:none}
  8. img {border: 0; vertical-align:middle}
  9. body{color:#FFF;background:#FFF; text-align:center}
  10. a{color:#FFF;text-decoration:none}
  11. a:hover{color:#BA2636;text-decoration:underline}
  12. /* 根据本实例 设置超链接字体与没有超链接字体演示为白色 */
  13. #wrapper{ margin:0 auto;position:relative;width:610px;height:559px;background:url(bg.jpg) no-repeat}
  14. /* position:relative是绝对定位关键，父级设置 */
  15. .box1{ position:absolute; width:147px; height:140px; left:198px; top:14px}
  16. .box2{position:absolute; width:141px; height:186px; left:31px; bottom:17px}
  17. .box3{position:absolute; width:132px; height:188px; right:28px; bottom:67px}
  18. /* position:absolute是绝对定位关键，子级设置同时lef right top bottom配合使用 */
  19. h3.title{ height:32px; line-height:32px; font-size:14px; font-weight:bold; text-align:left}
  20. /* 标题统一设置 */
  21. ul.list{ text-align:left; width:100%; padding-top:8px}
  22. ul.list li{ width:100%; text-align:left; height:22px;overflow:hidden}
  23. /* 加了overflow:hidden防止内容过多后自动换行 隐藏超出内容 */

2、完整HTML代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>绝对定位 实例在线演示 DIVCSS5</title>
  6. <link href="images/style.css" rel="stylesheet" type="text/css" />
  7. <!-- www.divcss5.com -->
  8. </head>
  9. <body>
  10. <div id="wrapper">
  11. <div class="box1">
  12. <h3 class="title">新闻动态</h3>
  13. <ul class="list">
  14. <li><a href="http://www.divcss5.com/wenji/w558.shtml">不会程序能学会CSS吗？</a></li>
  15. <li><a href="http://www.divcss5.com/wenji/w556.shtml">DIVCSS学习难吗？</a></li>
  16. <li><a href="http://www.divcss5.com/peixun/">我要参加DIVCSS5的培训</a></li>
  17. <li><a href="http://www.divcss5.com/css-tool/t720.shtml">jQuery所以版本集合整理</a></li>
  18. </ul>
  19. </div>
  20. <div class="box2">
  21. <h3 class="title">DIVCSS5栏目</h3>
  22. <ul class="list">
  23. <li><a href="http://www.divcss5.com/html/">CSS基础教程</a></li>
  24. <li><a href="http://www.divcss5.com/htmlrumen/">HTML基础教程</a></li>
  25. <li><a href="http://www.divcss5.com/wenji/">CSS问题</a></li>
  26. <li><a href="http://www.divcss5.com/css-tool/">CSS制作工具</a></li>
  27. <li><a href="http://www.divcss5.com/jiqiao/">DIV CSS技巧</a></li>
  28. <li><a href="http://www.divcss5.com/css-texiao/">DIV+CSS+JS特效</a></li>
  29. </ul>
  30. </div>
  31. <div class="box3">
  32. <h3 class="title">网站栏目</h3>
  33. <ul class="list">
  34. <li><a href="http://www.divcss5.com/cssrumen/">DIV CSS入门</a></li>
  35. <li><a href="http://www.divcss5.com/htmlrumen/">HTML入门教程</a></li>
  36. <li><a href="http://www.divcss5.com/shili/">CSS实例</a></li>
  37. <li><a href="http://www.divcss5.com/">DIVCSS5首页</a></li>
  38. <li><a href="http://www.divcss5.com/template/">DIV CSS模块模板</a></li>
  39. <li><a href="http://www.divcss5.com/w3c/">DIV CSS WEB标准</a></li>
  40. </ul>
  41. </div>
  42. </div>
  43. </body>
  44. </html>

相对定位特点：

　　相对于自身原有位置进行偏移；　　

　　仍处于标准文档流中；

　　随即拥有偏移属性和z-index属性（z-index属性：空间的层堆叠，会产生一个z轴的堆叠，如果没有z轴就会堆叠在x轴和y轴之间）

　　position：relative 块级元素会处于标准文档流中，会发生偏移重叠，有可能会延伸

绝对定位特点：

　　建立了以包含块为基准的定位

　　完全脱离了标准文档流

　　随即拥有偏移属性和z-index属性（空间的层堆叠）

　　较相对定位更复杂

选择偏移的基准考虑的比较多，偏移的基准指相对运动中的参照物

　　1、未设置偏移量

　　　　特点：

　　　　　　无论是否存在已定位祖先元素，都保持在元素初始位置

　　　　　　脱离了标准文档流

　　　　position：absolute尺寸随着内容的增加而扩展

　　　　　　（已定位祖先元素：某个元素设置了定位）

　　2、设置偏移量

定位（position）的更多相关文章

  1. css　温故而知新 定位(position)与权限(z-index)

    1.进行定位(position)的元素的权限(z-index)永远比没有定位的高. 2.如果两个元素都定位了,无论是相对定位还是绝对定位.他们的权限都是等权的. 3.两个相同定位的元素,除了z-ind ...

  2. 定位 position: absolute & relative

    [position:absolute] 意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级 ...

  3. css定位position认识

    1.绝对定位(position: absolute) 2.相对定位(position: relative) 3.固定定位(position: fixed) 绝对定位 设置position:absolu ...

  4. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  5. 通过定位position="fixed"实现网页内容的固定层效果

    在网页的顶部或者底部导航栏中经常需要使用到固定层的效果,即紧挨浏览器窗口的顶部或底部而网页其他内容的影响. 一.实现 主要通过设置导航栏元素的位置属性position="fixed" ...

  6. [转载]CSS元素的定位position

    CSS元素的定位position 属性position   值 描述 absolute                             生成绝对定位的元素,相对于 static 定位以外的第一 ...

  7. CSS.04 -- 浮动float、overflow、定位position、CSS初始化

    标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right :  设置浮动的元素,脱离标准流 浮动的框可以向左或向右移动,直到它的外边缘碰 ...

  8. 定位--position属性

    一.定位--position属性 1.static:默认值 没有定位--以标准文档流方式显示 2.relative:相对定位--相对自身原来的位置进行偏移(top left right bottom) ...

  9. 《css定位 position》课程笔记

    这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三 ...

  10. 定位 position 透明度 opacity

    1.position 定位 position:fixed 固定定位 position:relative 相对定位(不指定父级元素的话相对于document) position:absolute 绝对定 ...

随机推荐

  1. C#基础知识梳理索引

    C#基础知识梳理索引 一 引子 之前曾写了一篇随笔<.NET平台技术体系梳理+初学者学习路径推荐+我们的愿景与目标> 三个月过去了,目标使更多的编程初学者,轻松高效地掌握C#开发的基础,重 ...

  2. VS2010生成安装包制作步骤

    VS2010生成安装包制作步骤   在VS2010中文旗舰版本中生成winForm安装包,可以复制你电脑中的开发环境,避免你忘记了一下配置然后在别的机器上运行不起来.也省去了Framwork的安装. ...

  3. python 获取当前时间

    我有的时候写程序要用到当前时间,我就想用python去取当前的时间,虽然不是很难,但是老是忘记,用一次丢一次,为了能够更好的记住,我今天特意写下python 当前时间这篇文章,如果你觉的对你有用的话, ...

  4. linux不同环境下c/c++程序移植方法

    这边之前的大多数项目都用的java,而自己用的c++,等到快要上线的时候才发现线上机器的gcc和libc的版本都巨低,跟自己测试开发用的环境不兼容,编译出的c++可执行文件没法运行.解决c++程序的移 ...

  5. AngularJS框架速写

    最近在把玩AngularJS框架,之前也看过流行的Backbone,不过AngularJS给人的感觉完全不同,它走的是一条高帅富之路. 按照官方的说法,AngularJS是一套依赖注入的MVC开发套件 ...

  6. WINDOWS下安装PHP7出现PHP-CGI无法启动

    事情经过:下载PHP 7.0 然后运行,发现php-cgi一直挂掉.启动不起来.我直接到文件夹下启动PHP-CGI 启动, 失败,报错提示:缺失vcruntime140.dll.当时心中暗暗一笑,当年 ...

  7. squid和varnish的小结

    squid和varnish的小结 http://blog.haohtml.com/     上周初步接触linux下的这2个反向缓存软件,都实验了一下,貌似squid还是比较顺利的,varnish则碰 ...

  8. ZOJ 1204 一个集合能组成多少个等式

    Additive equations Time Limit : 20000/10000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other ...

  9. 直插式精巧I/O模块：WIZ812MJ数据手册V1.1

    1. 简介 WIZ812MJ是一款内嵌了W5100(硬件TCP/IP芯片,内置PHY).带其他胶合逻辑的MAG-JACK(带变压器的RJ45)网络模块.它可以当作一个组件使用,而且不需要为W5100和 ...

  10. as3 Loader程序域

    Loader的 load方法有两个参数 第二个参数是LoaderContext对象 LoaderContext对象里有一个applicationDomain( 程序 域)对象 设置程序域对象可以设置两 ...