应用CSS的position特性操纵网页页面合理布局的新手

2021-01-20 06:17 jianzhan

postion 特性界定了1个元素在网页页面合理布局中的部位和对周边元素的危害。该特性共有5个值:

position: absolute
position: relative
position: fixed
position: static
position: inherit
本文关键详尽探讨 position 特性的前3个值,最先大约解读下后两个值:

static

static 为 position 特性的默认设置值,static 元素会遵照一切正常的文本文档流,且会忽视 top,bottom,left,right 等特性。

inherit

inherit 值好似别的 css 特性的 inherit 值,即承继父元素的 position 值。

absolute

absolute 元素可能摆脱一切正常的文本文档流,因此 其周边的元素可能忽视它的存在。好似 absolute 元素的 display 特性被设以便 none 1样。此时,大家可使用 top,bottom,left,right 等特性对 absolute 元素开展肯定精准定位。1般状况下界定两个特性,top 或 bottom,left 或 right。
这个肯定精准定位必须略微了解下,由于这里非常容易与 relative 造成搞混。
比如,当对 absolute 元素加上 left:10px 精准定位后,这个 left 到底是对哪一个元素而言呢?实际上,此时可能往上搜索 absolute 元素的第1个父元素,假如该父元素的 position 值存在(且不为 static),那末这个 left:10px 便是依据该父元素开展的精准定位,不然可能再次搜索该父元素的父元素,1直追溯到某个父元素具有不为 static 的 position 值为止,假如不存在考虑标准的父元素,则会依据最外层的 window 开展精准定位。

CSS Code拷贝內容到剪贴板
  1. <div style="position: absolute">Im an absolute element</div>   
  2. <div>Im a default element</div>  

//立即忽视 absolute 元素的存在

relative

relative 元素遵照一切正常的文本文档流,因此周边元素不容易忽视它的存在,relative 元素一样适用 top,bottom,left,right 等特性。当大家应用 top,bottom,left,right等特性对 relative 元素开展相对性精准定位时的实际效果有点相近于 margin 特性做到的实际效果,可是差别在于, relative 元素周边的元素可能忽视 relative 元素的挪动。大家留意,当 relative 元素未应用精准定位特性开展相对性精准定位时,它不容易被周边的元素忽视,但运用精准定位特性开展精准定位后,周边的元素会忽视 relative 元素的挪动,它们会觉得 relative 元素依然在原先的部位,仍未开展挪动,大家用个事例来讲明:

CSS Code拷贝內容到剪贴板
  1. <div style="position: relative">Im a relative element</div>   
  2. <div>Im a default element</div>  

//仍未忽视 relative 元素的存在

全选拷贝放进笔记

CSS Code拷贝內容到剪贴板
  1. <div style="position: relative;top:10px">Im a relative element</div>   
  2. <div>Im a default element</div>  

//忽视了 relative 元素的挪动

fixed

fixed 元素可能摆脱一切正常的文本文档流,因此它与 absolute 元素很类似,一样会被周边元素忽视,适用 top,bottom,left,right 特性,但二者仍有很大不一样。
最先,fixed 元素精准定位与它的父元素无任何关联,它始终是相对性最外层的 window 开展精准定位的。
第2,fixed 元素正如它的姓名1样,它是固定不动在显示屏的某个部位,它不容易由于显示屏的翻转而消退。

全选拷贝放进笔记

CSS Code拷贝內容到剪贴板
  1. <div style="height:1000px">   
  2.   <div style="position: absolute;">Im an absolute element</div>   
  3.   <div style="position: fixed;">Im a fixed element</div>   
  4.   <div>Im a default element</div>   
  5. </div>  

//好似 absolute,fixed元素也被周边元素忽视

由于外层 div 高宽比超出1屏,因此如今大家往下翻转显示屏。
//仅有 fixed 元素未由于显示屏翻转而消退,由于它是“固定不动”的

z-index

为何要在这里提到 z-index 特性呢?那是由于 z-index 特性只对精准定位元素合理,即 position 值为 absolute,relative,fixed 时才合理。大家最先掌握下什么是 z-index。

从上图大家不难发现 z-index 值意味着的是元素的层叠次序,值越高则显示信息次序越优先选择。

CSS Code拷贝內容到剪贴板
  1. <div style="position: absolute;z-index:1">Im an absolute element</div>   
  2. <div style="position: fixed;z-index:2">Im a fixed element</div>  

//fixed 元素 z-index 比 absoulute 元素高,因此显示信息在前面

(我把情况色彩为非全透明,这样能够看得更清晰),倘若 z-index 值同样会出現甚么状况呢?

CSS Code拷贝內容到剪贴板
  1. <div style="position: absolute;z-index:1">Im an absolute element</div>   
  2. <div style="position: fixed;z-index:1">Im a fixed element</div>  

//z-index 值同样,依然显示信息为 fixed 元素

因此大家了解,当 z-index 值同样时,后载入的元素显示信息优先选择。

综合性事例
HTML 

XML/HTML Code拷贝內容到剪贴板
  1. <div id="example">  
  2.     <div id="div-before">  
  3.      <p>id = div-before</p>  
  4.     </div>  
  5.     <div id="div⑴">  
  6.      <div id="div⑴-padding">  
  7.       <p>id = div</p>  
  8.       <div id="div⑴a">  
  9.        <p>id = div⑴a</p>  
  10.        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>  
  11.       </div>  
  12.       <div id="div⑴b">  
  13.        <p>id = div⑴b</p>  
  14.        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>  
  15.       </div>  
  16.       <div id="div⑴c">  
  17.        <p>id = div⑴c</p>  
  18.       </div>  
  19.      </div>  
  20.     </div>  
  21.     <div id="div-after">  
  22.      <p>id = div-after</p>  
  23.     </div>  

   </div>

简易的应用1点款式:
CSS

CSS Code拷贝內容到剪贴板
  1. #example {   
  2.     floatrightright;   
  3.    }   
  4.     
  5.    #example p {   
  6.     margin: 0 0.25em;   
  7.     padding: 0.25em 0;   
  8.    }   
  9.    #div-before,   
  10.    #div-after {   
  11.     background-color#88d;   
  12.     color#000;   
  13.    }   
  14.     
  15.    #div⑴ {   
  16.     width400px;   
  17.     background-color#000;   
  18.     color#fff;   
  19.    }   
  20.     
  21.    #div⑴-padding {   
  22.     padding10px;   
  23.    }   
  24.     
  25.    #div⑴a {   
  26.     background-color#d33;   
  27.     color#fff;   
  28.    }   
  29.     
  30.    #div⑴b {   
  31.     background-color#3d3;   
  32.     color#fff;   
  33.    }   
  34.     
  35.    #div⑴c {   
  36.     background-color#33d;   
  37.     color#fff;   
  38.    }  

实际效果: