溫馨提示×

您好，登錄后才能下訂單哦！

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

HTML5如何實(shí)現(xiàn)圖層的疊加

發(fā)布時(shí)間：2021-03-20 11:44:20 來源：億速云 閱讀：1215 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了HTML5如何實(shí)現(xiàn)圖層的疊加，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

position語法：
position : static absolute relative

position參數(shù)：

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

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

  • relative : 　對(duì)象不可層疊，但將依據(jù)left，right，top，bottom等屬性在正常文檔流中偏移位置

position說明：
設(shè)置對(duì)象的定位方式，可以讓布局層容易位置絕對(duì)定位，控制盒子對(duì)象更加準(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>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“HTML5如何實(shí)現(xiàn)圖層的疊加”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

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

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

AI
助
手