定位（position）

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>
时间： 2024-10-11 02:36:04

定位（position）的相关文章

定位--position属性

一.定位--position属性 1.static:默认值 没有定位--以标准文档流方式显示 2.relative:相对定位--相对自身原来的位置进行偏移(top left right bottom) 3.absolute:绝对定位 4.fixed:固定定位 二.相对定位元素的规律 1.设置相对定位的盒子会相对它原来的位置,通过指定偏移到达新的位置 2.设置相对定位的盒子仍在标准文档流中,它对父级盒子和相邻盒子都没有影响 三.绝对定位-- absolute属性 1.偏移位置:left right

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

标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right :  设置浮动的元素,脱离标准流 可能的值 描述 left 元素向左浮动. right 元素向右浮动 none 默认值,元素不浮动,并会显示在其在文本中出现的位置 inherit 规定应该从父元素继承float属性的值   特点:浮动找浮动,不浮动找不浮动 浮动只影响后面的元素 浮动以元素顶部为基准对齐 浮动可是实现模式转换(span设置浮动可以设置宽高 ) 让块级元素在一行

div+css定位position详解

div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局的多样性,让我们的网页丰富多彩起来. 首先解释relative(相对定位),顾名思义,定位是相对的,那他是相对于什么呢?参照物是什么? 看如下代码: 2 2.预览效果,现在是三个并列的div 3 3.给中间的div增加定位属性:position:relative; top:10px; left:10

css定位position认识

1.绝对定位(position: absolute) 2.相对定位(position: relative) 3.固定定位(position: fixed) 绝对定位 设置position:absolute(表示绝对定位),作用将元素从文档流中拖出来,然后使用left.right.top.bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位.如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口. 如下面代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动

网页元素定位Position

 第九章: 网页元素定位Position position属性 static:默认值,没有定位 relative:相对定位 absolute:绝对定位 fixed:固定定位  (一般不用) static没有定位,以标准流方式显示 relative设置相对定位的盒子会相对它原来的位置,通过指定偏移,到达新的位置.设置相对定位的盒子仍在标准流中,它对父级盒子和相邻的盒子都没有任何影响. 设置了position属性值为relative的网页元素,无论是在标准流中还是在浮动流中,都不会对它的父级元素和相

网站布局之------浮动(float)和定位(position)(绝对定位，相对定位，静态固定定位)，***什么叫脱离文档流？

网站布局之------浮动(float)和定位(position)(绝对定位,相对定位,静态固定定位),***什么叫脱离文档流? @参考文档:http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html @什么叫脱离文档流?注意,只有绝对定位absolute和浮动float才会脱离文档流! 答案:CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位. ---部分无视和完全无视

10步掌握CSS布局定位: position static relative absolute float

无意中看到此文,因作者强调其中避开了浏览器bug/分歧,所以个人认为值得借鉴. 不才仔细看了此文,自觉受益匪浅 ,屡试不爽,佩服作者对css布局的精炼总结,顺便小译了一段, 英文水平有限,且个人通常写写php,对css了解不深却有点兴趣,错误之处还请指正. 个人没有空间,代码中的css文件和js保留了完整路径:http://www.barelyfitz.com/screencast/html-training/css/positioning/ 原文地址:http://www.barelyfitz

《css定位 position》课程笔记

这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三种布局:标准流,浮动,定位 两大元素:块级元素(div,h1-6,table,ol,ul,li,p),内联元素(a,span,img,input) position可选参数 static(标准流中正常排列) relative(相对定位) absolute(绝对定位) fixed(脱离正常的文档流,登

web前端css定位position和浮动float

最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框”.与之相反,span和h3等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”. 在这种情况下,这个框称为无名块框,因为它不与专门定义的元素相关联. 块级元素的文本行也会发生类似的情况.假设有一个包含三行文本的段落.每行文本形成一个无名框.无法直接对无名块或行框应用样式,因为没有可以

CSS布局定位:position

position:属性规定元素的定位类型. 取值:static | absolute | fixed | relative static : 默认值.无特殊定位 .对象遵循HTML定位规则. absolute(绝对定位)  : 将对象从文档流中拖出(可层叠).用left, right, top, bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位.如果不存在这样的父对象,则依照body对象绝对定位. fixed(固定定位,一种特殊的绝对定位) :相对于浏览器窗口.可以根据le