溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么在html5層實現(xiàn)疊加效果

發(fā)布時間:2022-02-21 09:53:23 來源:億速云 閱讀:287 作者:iii 欄目:開發(fā)技術(shù)

本文小編為大家詳細(xì)介紹“怎么在html5層實現(xiàn)疊加效果”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“怎么在html5層實現(xiàn)疊加效果”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。

position語法:
position : static absolute relative

position參數(shù):

  • static :  無特殊定位,對象遵循HTML定位規(guī)則

  • absolute :  將對象從文檔流中拖出,使用left,right,top,bottom等屬性進行絕對定位。而其層疊通過css z-index屬性定義。此時對象不具有邊距,但仍有補白和邊框

  • 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>

讀到這里,這篇“怎么在html5層實現(xiàn)疊加效果”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI