Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 99精品视频观看,国产成人精品综合在线观看,国产成人久久精品激情 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營(yíng)銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          CSS z-index 屬性
          
        
           
          
	
	
          
		
                        
          例
          設(shè)置圖像的 z-index：
          img{position:absolute;left:0px;top:0px;z-index:-1;}
          屬性定義及使用說(shuō)明
          z-index 屬性指定一個(gè)元素的堆疊順序。
          擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
          注意： z-index 進(jìn)行定位元素(position:absolute, position:relative, or position:fixed)。
          默認(rèn)值：auto
          繼承：no
          版本：CSS2
          JavaScript 語(yǔ)法：object.style.zIndex="1"
          瀏覽器支持
          表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。
          屬性
          z-index1.04.03.01.04.0
          屬性值
          值描述
          auto默認(rèn)。堆疊順序與父元素相等。
          number設(shè)置元素的堆疊順序。
          inherit規(guī)定應(yīng)該從父元素繼承 z-index 屬性的值。
          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
          、前言
          網(wǎng)頁(yè)顯示實(shí)際上是三維的，我們直觀看到的有x軸和y軸，但在網(wǎng)頁(yè)布局上還有一個(gè)z軸，對(duì)于定位元素，我們使用top、right、left、bottom來(lái)實(shí)現(xiàn)元素在x-y平面上的定位，但為了表示布局的三維立體概念，還引入了z-index，z-index屬性用來(lái)設(shè)置元素的堆疊順序，擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的上方。
          z-index有三個(gè)參數(shù)：
          1. auto：默認(rèn)值，相當(dāng)于未設(shè)置z-index，可看作z-index: 0
          2. number：無(wú)單位數(shù)字，用來(lái)設(shè)置z-index大小
          3. inherit：繼承父元素的z-index屬性值
          舉個(gè)小例子熱熱身
           <div style="width: 100px; height: 100px; background-color: red; position: relative;"></div>
 <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px;"></div>

          第二個(gè)div向上移動(dòng)50px，與第一個(gè)div產(chǎn)生了重疊部分，顯示情況如下：
          第二個(gè)div顯示在了第一個(gè)div上方，也就是重疊部分第二個(gè)div遮住了第一個(gè)div，現(xiàn)在給第一個(gè)div添加z-index屬性：
           <div style="width: 100px; height: 100px; background-color: red; position: relative; z-index: 1;"></div>
 <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px;"></div>

           我們將第一個(gè)div的z-index屬性設(shè)置為1
          這時(shí)我們發(fā)現(xiàn)第一個(gè)div遮住了第二個(gè)div，下面我們將逐步介紹定位元素屬性z-index。
          二、z-index只對(duì)定位元素奏效
          定位元素（position 屬性值為 relative 或 absolute 或 fixed）可以理解為具有x、y、z坐標(biāo)的元素。如果定位元素沒有顯示給出z-index屬性，那么它的z-index默認(rèn)值為0，如果一個(gè)元素不是定位元素，那給它設(shè)置z-index屬性也是無(wú)效的。
          例子來(lái)了
           <div style="width: 100px; height: 100px; background-color: red; z-index: 5;"></div>
 <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px; z-index: 1;"></div>

           第一個(gè)div的z-index設(shè)置為5，第二個(gè)div的z-index設(shè)置為1
          我們看到第二個(gè)div覆蓋了第一個(gè)div，雖然第一個(gè)div的z-index屬性值更大，但它不是定位屬性，所以它的z-index不起作用。
          三、非定位元素與非定位元素，以及相同z-index的堆疊順序比較
          如果兩個(gè)元素都為非定位元素，或者兩個(gè)定位元素的z-index值相等，那么按照文檔流的順序，后寫的元素將覆蓋先寫的元素。
          兩個(gè)例子
          1. 兩個(gè)都未設(shè)置z-index的定位元素
           <div style="width: 100px; height: 100px; background-color: red; position: relative;"></div>
 <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px;"></div>

           后寫的這個(gè)div（背景為black）覆蓋了先寫的div（背景為red）
          2. 兩個(gè)非定位元素
           <div style="width: 100px; height: 100px; background-color: red;"></div>
 <div style="width: 100px; height: 100px; background-color: black; margin-top: -50px;"></div>

           后寫的這個(gè)div（背景為black）覆蓋了先寫的div（背景為red）
          四、定位元素與非定位元素的堆疊順序
           如果定位元素未設(shè)置z-index或者z-index為正數(shù)，那么此類該定位元素的堆疊順序大于非定位元素；如果定位元素z-index為負(fù)數(shù),那么此類定位元素堆疊順序小于非定位元素。
          例如
          第一個(gè)定位元素div的z-index為正數(shù)，第二個(gè)為非定位元素div，第一個(gè)定位元素div的z-index為負(fù)數(shù)
           <div style="width: 100px; height: 100px; background-color: green; position: relative; top: 50px; z-index: 1"></div> 
 <div style="width: 100px; height: 100px; background-color: red;"></div>
 <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px; z-index: -1;"></div>

          z-index為正數(shù)的定位元素覆蓋了非定位元素，非定位元素覆蓋了 z-index為負(fù)數(shù)的定位元素
          五、父子及兄弟的堆疊順序
          1. 如果父元素設(shè)置了z-index且不是默認(rèn)值auto，無(wú)論子元素的z-index為何值，子元素堆疊順序永遠(yuǎn)大于其父元素； 
           <div style="width: 200px; height: 200px; background-color: green; position: relative; top: 50px; z-index: 100">
 <div style="width: 100px; height: 100px; background-color: blue; position: relative; z-index: -10;"></div> 
 </div>

          雖然子div的z-index值小于其父div，但子div仍顯示在了父div的上方
          2. 如果父元素未設(shè)置z-index或值為auto，那么當(dāng)子元素z-index為負(fù)數(shù)時(shí)，父元素堆疊順序?qū)⒋笥谧釉兀駝t子元素堆疊順序大于父元素
           <div style="width: 200px; height: 200px; background-color: green; position: relative; top: 50px;">
 <div style="width: 100px; height: 100px; background-color: blue; position: relative; z-index: -1;"></div>
 </div>

           父元素未設(shè)置z-index，子元素z-index為-1，可以看到子元素被父元素覆蓋了 
          3. 無(wú)論父元素的z-index如何，兄弟元素間的z-index值都可相互比較，z-index值越大堆疊順序越高 
           <div style="width: 200px; height: 200px; background-color: green; position: relative; top: 50px;">
 <div style="width: 100px; height: 100px; background-color: red; position: relative; z-index: 2;"></div>
 <div style="width: 100px; height: 100px; background-color: black; position: relative; z-index: 1; top: -50px;"></div> 
 </div>

          第一個(gè)子元素的z-index大于第二個(gè)子元素的z-index，所以第一個(gè)子元素覆蓋第二個(gè)子元素
          3. 對(duì)于父元素及兄弟元素之外的其它元素，子元素的堆疊順序由其父元素的z-index決定。
           <div style="position: relative; z-index: 10;">
 <div style="width: 100px; height: 100px; background-color: red; position: relative; z-index: 2;"></div>
 </div>
 <div style="position: relative; z-index: 5;">
 <div style="width: 100px; height: 100px; background-color: black; position: relative; z-index: 3; top: -50px;"></div> 
 </div>

          盡管背景為紅色的子div元素z-index小于背景為黑色的子div元素，但紅色仍覆蓋了黑色，就是因?yàn)榧t色div的父元素z-index大于黑色div的父元素，所以無(wú)論黑色子div的z-index多大，它的堆疊順序始終小于紅色div。
          六、最后
          如有錯(cuò)誤或不足之處還望指出探討，十分感謝！
          者： IT共享者 來(lái)源： IT共享之家
          div cssz-index層重疊順序
          div層、span層等html標(biāo)簽層重疊順序樣式z-index，平時(shí)CSS使用較少，但也會(huì)難免會(huì)碰到CSS z-index使用。
          從基礎(chǔ)語(yǔ)法到應(yīng)用案例教程講解學(xué)習(xí)z-index。
          一、z-index語(yǔ)法與結(jié)構(gòu)
          z-index 跟具體數(shù)字
          div{ 
           z-index:100 
          } 
          注意：z-index的數(shù)值不跟單位。
          z-index的數(shù)字越高越靠前，并且值必須為整數(shù)和正數(shù)(正數(shù)的整數(shù))。
          二、z-index使用條件
          z-index在使用絕對(duì)定位 position:absolute屬性條件下使用才能使用。通常CSS讓不同的對(duì)象盒子以不同順序重疊排列，CSS就是要z-index樣式屬性。
          三、案例
          1. z-index重疊順序案例
          為了方便觀察，設(shè)置3個(gè)DIV盒子，分別設(shè)置不同css背景顏色，設(shè)置相同CSS高度、CSS寬度。分別設(shè)置背景顏色)為黑色、紅色、藍(lán)色。CSS width為300px，css height為100px。
          css代碼(沒加z-index屬性)
          <style> 
           .div css5 { 
           position: relative; 
           } 

           .div css5-1, 
           .div css5-2, 
           .div css5-3 { 
           width: 300px; 
           height: 100px; 
           position: absolute; 
           } 

           .divcss5-1 { 

           background: #000;/* 黑色*/ 
           left: 10px; 
           top: 10px 
           } 

           .divcss5-2 { 

           background: #F00;/* 紅色*/ 
           left: 20px; 
           top: 20px 
           } 

           .divcss5-3 { 

           background: #00F;/* 藍(lán)色*/ 
           left: 30px; 
           top: 30px 
           } 
          </style> 
          CSS代碼(加上z-index屬性后) :
          <style> 
           .div css5 { 
           position: relative; 
           } 

           .div css5-1, 
           .div css5-2, 
           .div css5-3 { 
           width: 200px; 
           height: 100px; 
           position: absolute; 
           } 

           .div css5-1 { 
           z-index: 10; 
           background: #000;/* 黑色*/ 
           left: 10px; 
           top: 10px 
           } 

           .div css5-2 { 
           z-index: 20; 
           background: #F00;/* 紅色*/ 
           left: 20px; 
           top: 20px 
           } 

           .div css5-3 { 
           z-index: 15; 
           background: #00F;/* 藍(lán)色*/ 
           left: 30px; 
           top: 30px 
           } 
          </style> 
          html代碼
          <div class="divcss5-1"></div> 
          <div class="divcss5-2"></div> 
          <div class="divcss5-3"></div> 
          沒加的效果:
          加上z-index屬性效果：
          2. 案例說(shuō)明
          三個(gè)盒子均都使用了絕對(duì)定位屬性position樣式，并且設(shè)置相同的高度和寬度樣式。為了便于觀察CSS使用left、right屬性并賦予不同值，讓其錯(cuò)落有致。
          • Div css5-1 盒子背景為黑色， z-index:10
          • Div css5-2 盒子背景為紅色， z-index:20
          • Divcss5-3盒子背景為藍(lán)色 ， z-index:15
          為可以看見第一個(gè)盒子z-index:10，所以重疊在最下層，而第二個(gè)盒子z-index:20，值最大所以最上層重疊，第三個(gè)盒子設(shè)置z-index:15，居中。
          四、總結(jié)
          本文基于CSS基礎(chǔ)，介紹了如何使用z-index重疊順序樣式，在實(shí)際DIV+CSS布局時(shí)候CSS需要絕對(duì)定位樣式，并且可以使用left、right進(jìn)行定位，通過不同z-index值實(shí)現(xiàn)層重疊順序排列。代碼很簡(jiǎn)單，希望能夠幫助你學(xué)習(xí)。
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
精品日韩在线视频一区二区三区
|
精品一区二区三区中文字幕|
精品无码综合一区|
成人中文字幕一区二区三区|
合区精品久久久中文字幕一区|
亚洲另类无码一区二区三区|
国产成人综合精品一区|
国产精品一区二区资源|
在线观看一区二区三区av|
久久99热狠狠色精品一区|
国产精品一区二区三区99|
国产aⅴ一区二区三区|
亚洲日韩精品国产一区二区三区|
亚洲日本一区二区|
精品三级AV无码一区|
亚洲日本精品一区二区|
福利一区二区三区视频在线观看|
国产在线精品一区二区夜色|
日本精品少妇一区二区三区|
国产精品熟女视频一区二区|
亚洲国产欧美日韩精品一区二区三区|
亚洲午夜电影一区二区三区|
精品国产伦一区二区三区在线观看|
国产精品高清一区二区三区|
亚洲毛片αv无线播放一区|
岛国无码av不卡一区二区|
国产在线观看一区二区三区精品|
免费观看一区二区三区|
国产精品视频第一区二区三区|
亚洲午夜精品一区二区|
一区二区三区观看免费中文视频在线播放
|
国产激情一区二区三区小说
|
国产精品熟女视频一区二区|
国产女人乱人伦精品一区二区|
日本精品视频一区二区三区|
日韩精品一区二区三区中文字幕
|
后入内射国产一区二区|
视频一区二区三区免费观看
|
国产伦精品一区二区三区免费迷
|
后入内射国产一区二区|
国产亚洲情侣一区二区无|