• 定位（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 "5B8B4F53",Arial, Helvetica, sans-serif} 
    6. /* 5B8B4F53 代表 宋体，更多中文字体转 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.  
    14. #wrapper{ margin:0 auto;position:relative;610px;height:559px;background:url(bg.jpg) no-repeat} 
    15. /* position:relative是绝对定位关键，父级设置 */ 
    16.  
    17. .box1{ position:absolute; 147px; height:140px; left:198px; top:14px} 
    18. .box2{position:absolute; 141px; height:186px; left:31px; bottom:17px} 
    19. .box3{position:absolute; 132px; height:188px; right:28px; bottom:67px} 
    20. /* position:absolute是绝对定位关键，子级设置同时lef right top bottom配合使用 */ 
    21.  
    22. h3.title{ height:32px; line-height:32px; font-size:14px; font-weight:bold; text-align:left} 
    23. /* 标题统一设置 */ 
    24. ul.list{ text-align:left; 100%; padding-top:8px} 
    25. ul.list li{ 100%; text-align:left; height:22px;overflow:hidden} 
    26. /* 加了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、设置偏移量

      
  • 相关阅读:
    微信小程序之跨界面传参
    微信小程序简易教程
    css动画与js动画的区别
    不同浏览器兼容性的区别
    Filter学习
    FileDescriptor
    Executor框架
    Struts1的处理流程
    Struts1的实现原理
    [转]TOMCAT原理以及处理HTTP请求的过程、ContextPath ServletPath
  • 原文地址：https://www.cnblogs.com/hq123/p/5986293.html
Copyright © 2020-2023  润新知