欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

DIV重疊 CSS讓DIV層疊 兩個(gè)DIV或多個(gè)DIV順序重疊加

  發(fā)布時(shí)間：2014-11-04 21:03:47   作者：佚名   我要評(píng)論
這篇文章主要為大家介紹了讓DIV重疊并按想要順序重疊需要CSS來實(shí)現(xiàn)，即CSS絕對(duì)定位進(jìn)行實(shí)現(xiàn),需要的朋友可以參考下
讓DIV重疊并按想要順序重疊需要CSS來實(shí)現(xiàn)，即CSS絕對(duì)定位進(jìn)行實(shí)現(xiàn)。

重疊樣式需要主要CSS樣式解釋

1、z-index 重疊順序?qū)傩?
2、position:relative和position:absolute設(shè)置對(duì)象屬性為可定位（可重疊）
3、left right top bottom絕對(duì)定位具體位置設(shè)置

配合的樣式

1、css width
2、css height
3、background 為了觀察效果，我們對(duì)不同DIV設(shè)置不同背景顏色進(jìn)行區(qū)別

接下來我們?yōu)榇蠹曳钌螪IV按自己意愿重疊、疊加實(shí)例布局。我們新建4個(gè)DIV盒子，一個(gè)大的DIV盒子，CSS命名為“.div-relative”，三個(gè)小DIV盒子放于第一個(gè)大DIV對(duì)象盒子內(nèi)，DIV命名分別為“.div-a”、“.div-b”、“.div-c”。

一、未排序、為排順序DIV層疊重疊實(shí)例

1、完整HTML源代碼如下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4. <meta charset="utf-8" />    
  5. <title>div重疊 疊加實(shí)例 未排層疊順序 www.dbjr.com.cn</title>    
  6. <style>    
  7. .div-relative{position:relative; color:#000; border:1px solid #000; width:500px; height:400px}    
  8. .div-a{ position:absolute; left:30px; top:30px; background:#F00; width:200px; height:100px}    
  9. /* css注釋說明： 背景為紅色 */    
  10. .div-b{ position:absolute; left:50px; top:60px; background:#FF0; width:400px; height:200px}    
  11. /* 背景為黃色 */    
  12. .div-c{ position:absolute; left:80px; top:80px; background:#00F; width:300px; height:300px}    
  13. /* DIV背景顏色為藍(lán)色 */    
  14. </style>    
  15. </head>    
  16. <body>    
  17. <div class="div-relative">    
  18. <div class="div-a">我背景為紅色</div>    
  19. <div class="div-b">我背景為黃色</div>    
  20. <div class="div-c">我背景為藍(lán)色</div>    
  21. </div>    
  22. </body>    
  23. </html>  
2、未排DIV層疊順序 div+css實(shí)例截圖



實(shí)例說明：

我們使用position實(shí)現(xiàn)絕對(duì)定位，對(duì)父級(jí)設(shè)置position:relative屬性，對(duì)其子級(jí)設(shè)置position:absolute加上left或right和top或bottom實(shí)現(xiàn)子級(jí)在父級(jí)內(nèi)任意定位。在原始情況下重疊是按DIV代碼本身順序排列，越后輸入的DIV盒子其越靠前（浮在上面）。除了改變?cè)创a本身div代碼在html順序，我們還可以使用css z-index實(shí)現(xiàn)DIV層排列順序。

二、通過CSS控制DIV重疊順序

我們使用以上絕對(duì)定位實(shí)例代碼，只需要對(duì)“.div-a”、“.div-b”、“.div-c”分別加入z-index樣式即可實(shí)現(xiàn)任意順序排列。

擴(kuò)展知識(shí)：

z-index的值為正整數(shù)值，數(shù)字越大對(duì)應(yīng)對(duì)象層越浮上層（越靠前。

以上實(shí)例默認(rèn)順序是“.div-c”浮在最上層（藍(lán)色背景層）、“.div-b”浮在中層（黃色背景層）、“.div-a”排最底層（紅色背景層）。我們接下來使用z-index樣式在不改變html代碼情況下實(shí)現(xiàn)順序顛覆，“.div-b”浮在中層（黃色背景層）排序不變，實(shí)現(xiàn)“.div-a”浮在最上層（紅色背景層）、“.div-c”排最底層（藍(lán)色背景層）。

1、實(shí)現(xiàn)按意愿排列DIV層疊重疊順序完整HTML代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4. <meta charset="utf-8" />    
  5. <title>div重疊 疊加實(shí)例 排層疊順序 www.dbjr.com.cn</title>    
  6. <style>    
  7. .div-relative{position:relative;color:#000;border:1px solid #000;width:500px;height:400px}    
  8. .div-a{ position:absolute;left:30px;top:30px;z-index:100;background:#F00;width:200px;height:100px}    
  9. /* div背景色為紅色 */    
  10. .div-b{ position:absolute;left:50px;top:60px;z-index:80;background:#FF0;width:400px;height:200px}    
  11. /* 背景為黃色 */    
  12. .div-c{ position:absolute;left:80px;top:80px;z-index:70;background:#00F;width:300px;height:300px}    
  13. /* 背景為藍(lán)色 */    
  14. </style>    
  15. </head>    
  16. <body>    
  17. <div class="div-relative">    
  18. <div class="div-a">我背景為紅色</div>    
  19. <div class="div-b">我背景為黃色</div>    
  20. <div class="div-c">我背景為藍(lán)色</div>    
  21. </div>    
  22. </body>    
  23. </html>   

2、div層疊順序?qū)嵗貓D



實(shí)現(xiàn)紅背景的“div-a”與藍(lán)色背景“div-c”層疊順序替換實(shí)例截圖

我們?cè)诓桓淖兊谝粋€(gè)實(shí)例的HTML代碼下，對(duì)“div-a”、“div-b”、“div-c”絕對(duì)定位實(shí)施后加入z-index實(shí)現(xiàn)層疊順序改變。

三、DIV重疊總結(jié)

要實(shí)現(xiàn)DIV重疊，并改變實(shí)現(xiàn)DIV盒子層疊重疊順序，我們對(duì)父級(jí)使用position:relative,對(duì)子級(jí)使用position:absolute、z-index（重疊順序）、left，right，top，bottom絕對(duì)定位相當(dāng)于父級(jí)具體位置。

文中的兩個(gè)演示下載

相關(guān)文章

  • CSS 層疊加的5條原則

    CSS網(wǎng)頁布局教程:層疊加的5條原則.
    2009-08-29

  • HTML5 層的疊加的實(shí)現(xiàn)

    這篇文章主要介紹了HTML5 層的疊加的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07

最新評(píng)論