深层次了解CSS精准定位与堆叠

2021-01-20 06:22 jianzhan

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(相对性精准定位)

相对性精准定位如同1种折衷的方式，是在静态数据精准定位和肯定精准定位中去1个均衡点，所谓相对性精准定位便是使被运用的元素不摆脱文本文档流，却可以根据座标值以初始部位为参考物开展偏位。

座标值：
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(固定不动精准定位)

固定不动精准定位是肯定精准定位的1种独特方式，它是以访问器对话框做为参考物来界定网页页面元素，假如界定某个元素固定不动显示信息，则该元素不在受文本文档流的危害。他自始至终以访问器对话框来精准定位自身显示信息的显示信息部位，无论访问器对话框怎样翻转，也无论访问器对话框尺寸怎样转变，该元素都会显示信息在访问器对话框内。通俗化的说便是以访问器对话框的4条边做为座标系来精准定位元素的部位。

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精准定位与堆叠便是网编共享给大伙儿的所有內容了，期待能给大伙儿1个参照，也期待大伙儿多多适用脚本制作之家。

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

为您推荐