当前位置 : 主页 > 网页制作 > css >

深入理解CSS定位与层叠

来源:互联网 收集:自由互联 发布时间:2022-04-17
position:static(静态定位) 当position属性定义为static时,可以将元素定义为静态位置,所谓静态位置就是各个元素在HTML文档流中应有的位置 podisition定位问题。所以当没有定义position属性时

position:static(静态定位)

当position属性定义为static时,可以将元素定义为静态位置,所谓静态位置就是各个元素在HTML文档流中应有的位置

podisition定位问题。所以当没有定义position属性时,并不说明该元素没有自己的位置,它会遵循默认显示为静态位置,在静态定位状态下无法通过坐标值(top,left,right,bottom)来改变它的位置。

position:absolute(绝对定位)

当position属性定义为absolute时,元素会脱离文档流,完全不受文档流的影响,根据某个参照物坐标来定位它的位置.当绝对定位元素没有显示的指明top,right,bottom,left定位属性时,它还是暂时未脱离文档流,并受文档流的影响,具有相对定位的特性,但是它在文档流中的位置已经不存在了。如果绝对定位只显示的定位x轴或者Y轴,那它只具备这个方向上的定位能力,另一个方向仍然显示为相对定位的特性。

坐标值:
top:表示定位元素顶边外壁到参照物元素顶部内壁的距离
right:表示定位元素右边外壁到参照物元素右侧内壁的距离
left:表示定位元素左边外壁到参照物元素左侧内壁的距离
bottom:表示定位元素底边外壁到参照物元素底部内壁的距离

XML/HTML Code复制内容到剪贴板
  1. <div id="box">box                                                             
  2.   <div id="boxA">boxA</div>     
  3.   <div id="boxB">boxB   
  4.    <div id="boxC">boxC</div>  
  5.    <div id="boxD">boxD</div>  
  6.   </div>  
  7.  </div>  
CSS Code复制内容到剪贴板
  1. #box{   
  2.  margin:40px auto;   
  3.  width:400px;   
  4.  height:400px;   
  5.  border:2px red solid;   
  6. }   
  7. #boxA{   
  8.  position:absolute;   
  9.  top:100px;   
  10.  left:100px;   
  11.  width:50px;   
  12.  height:50px;   
  13.  background#3E7DB0;   
  14. }  

大盒子box在整个网页中距顶部40px居中显示,但是boxA由于position定位为绝对定位,它脱离了大盒子,距整个网页左边100px顶部100px,当元素定义为绝对定位,可以根据结合它的坐标属性(top,left,bottom,right)来精确定位它的位置

position:relative(相对定位)

相对定位好似一种折中的方法,是在静态定位和绝对定位中去一个平衡点,所谓相对定位就是使被应用的元素不脱离文档流,却能够通过坐标值以原始位置为参照物进行偏移。

坐标值:
top:表示定位元素顶边外壁到原始位置顶部外壁的距离
right:表示定位元素右边外壁到原始位置元素右侧外壁的距离
left:表示定位元素左边外壁到原始位置元素左侧外壁的距离
bottom:表示定位元素底边外壁到原始位置元素底部外壁的距离

XML/HTML Code复制内容到剪贴板
  1. <div id="box">  
  2.      <div id="boxA">boxA</div>  
  3.      <div id="boxB">boxB   
  4.       <div id="boxC">boxC</div>  
  5.       <div id="boxD">boxD</div>  
  6.         </div>  
  7.     </div>  
CSS Code复制内容到剪贴板
  1. #box{   
  2.  margin:40px auto;   
  3.  width:400px;   
  4.  height:400px;   
  5.  border:2px red solid;   
  6. }   
  7. #boxA{   
  8.  position:relative;   
  9.  top:100px;   
  10.  left:100px;   
  11.  width:50px;   
  12.  height:50px;   
  13.  background#3E7DB0;   
  14. }   
  15. #boxB{   
  16.  width:50px;   
  17.  height:150px;   
  18.  background#B9C8C5;   
  19. }   
  20. #boxC{   
  21.  width:50px;   
  22.  height:50px;   
  23.  background#1D92C8;   
  24. }   
  25. #boxD{   
  26.  width:400px;   
  27.  height:50px;   
  28.  background#086499;   
  29. }  

大盒子box在整个网页中距顶部40px居中显示,当元素boxA由于position定义为相对定位,相对于它本身的位置的位置进行偏移,据原先的位置左100px和顶部100px,当遇到文档流boxD时,它会覆盖boxD。相对定位虽然偏离了原始位置,但是它的原始位置所占据的空间仍然保留着,并没有被其它元素所占据。

position:fixed(固定定位)

固定定位是绝对定位的一种特殊形式,它是以浏览器窗口作为参照物来定义网页元素,如果定义某个元素固定显示,则该元素不在受文档流的影响。他始终以浏览器窗口来定位自己显示的显示位置,不管浏览器窗口如何滚动,也不管浏览器窗口大小如何变化,该元素都会显示在浏览器窗口内。通俗的说就是以浏览器窗口的四条边作为坐标系来定位元素的位置。

XML/HTML Code复制内容到剪贴板
  1. <div id="box">box </div>    
  2. <div id="fixed">fixed</div>  

CSS Code复制内容到剪贴板
  1. #box{   
  2.  margin:40px auto;   
  3.  width:400px;   
  4.  height:400px;   
  5.  border:2px red solid;   
  6.  position:fixed;   
  7. left:100px;   
  8. top:100px;    
  9. }   
  10. #fixed{   
  11.  height:4000px;   
  12. }  
当把box定义为固定定位时,box永远都是在浏览器窗口内,fixed属性还可通过left,right,top,bottom来控制从流浪器不同边框来进行定位。 相对定位(relative)与绝对定位(absolute):  XML/HTML Code复制内容到剪贴板
  1. <div id="box">box   
  2.   <div id="boxA">boxA</div>  
  3.   <div id="boxB">boxB   
  4.    <div id="boxC">boxC</div>  
  5.    <div id="boxD">boxD</div>  
  6.   </div>  
  7.  </div>  
如果box把 position属性定义为relative,只有它的子元素boxA和boxB position属性定义为absolute才能相对box定位,而他的孙子元素boxC和boxD把position定义为absolute并不能相对box来定位。但是如果把boxB的position属性定义为relative,它底下的子元素boxC和boxD就能相对于父元素boxB来定位,所以,把position属性定义为relative的元素,只有它的子元素才能相对它定位,孙子元素并不能相对它定位。相对定位与绝对定位的结合使用可以更加精确的控制网页元素,设计出更强大的布局效果。 position属性定位小工具:www.linxz.de/css_tool/position_demo.html 层叠: css可以通过z-index属性来排列不同定位元素之间的层叠顺序,该属性可以设置任何整数值,数值越大,所排列的顺序越靠前。
XML/HTML Code复制内容到剪贴板
  1. <div id="box">box   
  2. 2   <div id="boxA">boxA</div>  
  3. 3   <div id="boxB">boxB</div>  
  4. 4   <div id="boxC">boxC</div>  
  5. 5  </div>  
CSS Code复制内容到剪贴板
  1. #boxA,#boxB,#boxC{   
  2.  width:100px;   
  3.  height:200px;   
  4.  position:absolute;   
  5. }   
  6. #boxA{   
  7.  background#086499;   
  8.  z-index:1;   
  9.  left:100px;   
  10. }   
  11. #boxB{   
  12.  top:50px;   
  13.  left:50px;   
  14.  background#B9C8C5;   
  15.  z-index:2;   
  16. }   
  17. #boxC{   
  18.  top:100px;   
  19.  background#1D92C8;   
  20.  z-index:3;   
  21. }  
boxC排在最上面,boxB在最中间,boxA在最后。z-index的值越大越靠前。

以上这篇深入理解CSS定位与层叠就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持自由互联。

原文地址:http://www.cnblogs.com/shouce/archive/2016/04/15/5395204.html

网友评论