App下載

如何在html5層實現(xiàn)疊加效果?案例分享!

猿友 2021-08-05 17:12:00 瀏覽數(shù) (3709)
反饋

今天小編和大家分享有關(guān)于“如何在html5層實現(xiàn)疊加效果?”這個方法!那么下面是相關(guān)的內(nèi)容分享,希望對小伙伴們的學(xué)習(xí)有所幫助!

position語法:
position : static absolute relative

position參數(shù):

  • static :  無特殊定位,對象遵循HTML定位規(guī)則
  • absolute :  將對象從文檔流中拖出,使用left,right,top,bottom等屬性進(jìn)行絕對定位。而其層疊通過css z-index屬性定義。此時對象不具有邊距,但仍有補(bǔ)白和邊框
  • relative :  對象不可層疊,但將依據(jù)left,right,top,bottom等屬性在正常文檔流中偏移位置

position說明:
設(shè)置對象的定位方式,可以讓布局層容易位置絕對定位,控制盒子對象更加準(zhǔn)確。

<html>
   <head>
     <title>層的定位</title>
   </head>
   <style>
    div {height:300;
        width:300;
        }
    #d1 {position:absolute;               
        background-color:green;     
        left:2em;                       
        top:2em;
        }
     #d2 {position:absolute;
         background-color:blue;
         left:4em;                      
         top:4em;
         }
      #d3 {position:absolute;
          background-color:red;
          left:6em;                     
          top:6em;
          }
   </style>
   <body>
     <div id="d1">                       
     <div id="d2">                    
     <div id="d3">                    
   </body>
 </html> 

那么到此這篇關(guān)于HTML5 層疊加實現(xiàn)方法文章就介紹到這了,更多相關(guān)HTML5 層疊加內(nèi)容請大家在W3Cschool進(jìn)行搜索和了解! 


0 人點(diǎn)贊