zoukankan      html  css  js  c++  java

  • HTML中的布局方式：absolute、relative、fixed、static

    在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
    [html] view plain copy
     
    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.     95px;  
    8.     height:95px;  
    9.     margin: 0px 0px 1px 1px;  
    10.     padding:0px;  
    11.     /*display:inline-block;*/  
    12.     letter-spacing:1px;  
    13.       
    14.     /* only for ie*/  
    15.     *display:inline;  
    16.     *zoom:1;  
    17.       
    18.     border:1px solid #ffffff;  
    19.     border-radius:5px;  
    20.     -moz-border-radius:5px; /* Old Firefox */  
    21.     opacity:1;  
    22.     text-align:center;  
    23.     color:white;  
    24. }  
    25. #main{400px;height:300px;}  
    26. </style>  
    27. </head>  
    28.   
    29. <body>  
    30. <div id="main" style="  
    31.     position: relative;  
    32.     margin: 50px;  
    33.     padding: 80px;  
    34. ">  
    35. <div id="div1" style="  
    36.     position: absolute;    
    37.     left: 83px;    
    38.     top: 0px;  
    39.     background-color: rgb(199, 219, 50);  
    40. ">div1 absolute</div>  
    41. <div id="div2" style="  
    42.     position: absolute;  left: 0px;    
    43.     top: 90px;  
    44.     background-color: rgb(1, 214, 35);  
    45.     z-index:10;  
    46. ">div2 absolute z-index<br/>:10</div>  
    47. <div id="div3" style="  
    48.     position: relative;  left: 0px;    
    49.     top: 0px;  
    50.     background-color: rgb(23, 178, 238);  
    51.     z-index:11  
    52. ">div3 relative z-index:11</div>  
    53. <div id="div4" style="  
    54.     position: relative;  left: 0px;    
    55.     top: 0px;  
    56.     background-color: rgb(23, 178, 238);  
    57.     z-index:0;  
    58. ">div4 relative z-index:0</div>  
    59. <div id="div5" style="  
    60.     position: fixed;  left: 10px;    
    61.     top: 10px;  
    62.     background-color: rgb(229, 122, 238);  
    63. ">div5 fixed</div>  
    64. </div>  
    65.   
    66. </body></html>  
    请参见：http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html
  • 相关阅读:
    winform中的 listview的使用的讲解。
    快乐的一天从AC开始 | 20210716 | P1345
    快乐的一天从AC开始 | 20210715 | P4643
    快乐的一天从AC开始 | 20210714 | P3594
    快乐的一天从AC开始 | 20210713 | P3557
    快乐的一天从AC开始 | 20210712 | P2251
    P7294-[USACO21JAN]Minimum Cost Paths P【单调栈】
    AT4353-[ARC101D]Robots and Exits【LIS】
    2021牛客暑期多校训练营9C-Cells【LGV引理,范德蒙德行列式】
    Loj#2880-「JOISC 2014 Day3」稻草人【CDQ分治,单调栈,二分】
  • 原文地址：https://www.cnblogs.com/Jacklovely/p/5642877.html
Copyright © 2011-2022 走看看