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

4 篇文章 0 订阅
   
在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.     width: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{width: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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这里是CSS五种常见的定位方式的介绍和用法: 1. static(静态定位):元素的位置遵循正常的文档流,不受top、bottom、left、right影响。 2. relative(相对定位):元素的位置相对于它在文档流的初始位置进行定位,可以通过top、bottom、left、right属性进行微调。 3. absolute(绝对定位):元素的位置相对于最近的已定位祖先元素(position属性不为static)进行定位,如果没有已定位的祖先元素,则相对于文档的body元素进行定位。 4. fixed(固定定位):元素的位置相对于浏览器窗口进行定位,不随页面滚动而改变。 5. sticky(粘性定位):元素在跨越特定阈值前为相对定位,之后为固定定位。可以通过top、bottom、left、right属性进行微调。 下面是一个例子,展示了这五种定位方式的用法: ```html <!DOCTYPE html> <html> <head> <title>定位方式示例</title> <style type="text/css"> .container { height: 300px; position: relative; border: 1px solid black; } .box { width: 100px; height: 100px; background-color: red; color: white; text-align: center; line-height: 100px; font-size: 20px; } .static { position: static; } .relative { position: relative; top: 50px; left: 50px; } .absolute { position: absolute; top: 50px; left: 50px; } .fixed { position: fixed; top: 50px; left: 50px; } .sticky { position: sticky; top: 50px; } </style> </head> <body> <div class="container"> <div class="box static">static</div> <div class="box relative">relative</div> <div class="box absolute">absolute</div> <div class="box fixed">fixed</div> <div class="box sticky">sticky</div> </div> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值