在網頁交互中，js插入一個div層顯示是常常用到的功能，在插入div之后，你或許發現div顯示并不在最上面，而是被其他層擋住了，這是什么原因呢，又該如何解決呢？這正是本文要介紹的內容。

實例：JS插入div

js可以用before()方法或after()方法在某個標簽之前或之后插入一個div，代碼其實很簡單，下面是一個實例。

HTML結構

<div class="content1">
  First - yellow
</div>
<div class="content2">
  Second - blue
</div>

CSS

.content1,.content2,.content3{
  width:200px;
  height:50px;
  float:left;
  position:absolute;
}
.content1{left:10px;}
.content2{left:30px;}
.content3{left:150px;}
.content1{background:yellow;top:10px;z-index:1;}
.content2{background:blue;top:50px;z-index:1;}
.content3{background:red;top:30px;z-index:1}

JQuery

$(".content2").before("<div class='content3'>Third - red</div>");

JQuery用的是before()方法，在class=content2的div前面插入一個div。

我們看看顯示效果。

demodownload

我們發現，第三個div（紅色）插在了中間，顯示在第二個div（藍色）的下面。

我們如何讓第三個div顯示在第二個div的上面呢？有兩種方法實現。

1、JS用after()方法代替before()插入div

把JQuery代碼改為

$(".content2").after("<div class='content3'>Third - red</div>");

這樣，就相當于在第二個div的后面插入一個div，但是可以通過css把插入的div移到第二個div前面。

顯示效果如下：

demodownload

2、設置第三個div的css z-index 值

我們還可以設置插入的div的 z-index 值，該值要大于第二個div的z-index值。如該實例中，第二個div的z-index值是1，那么可以把插入的div的z-index值設為2，這樣就可以讓該div位于第二個div之上了。CSS代碼如下：

.content1{background:yellow;top:10px;z-index:1;}
.content2{background:blue;top:50px;z-index:1;}
.content3{background:red;top:30px;z-index:2}

效果

demodownload

為div設置z-index來表示層的上下關系，你如果還不十分了解，可看看此文詳解css z-index的值使用區別:-1,0,1,auto,999。

總結

本文介紹了如何通過JS插入一個div，并讓該div位于上面而不被其他div遮住。可以通過插入的方法達到目的，也可通過更改z-index來設置層的上下關系。

標簽: before方法  after方法  div  z-index