卡卡網(wǎng)

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

實(shí)例：JS插入div

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

HTML結(jié)構(gòu)

<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前面插入一個(gè)div。

我們看看顯示效果。

demodownload

我們發(fā)現(xiàn)，第三個(gè)div（紅色）插在了中間，顯示在第二個(gè)div（藍(lán)色）的下面。

我們?nèi)绾巫尩谌齻€(gè)div顯示在第二個(gè)div的上面呢？有兩種方法實(shí)現(xiàn)。

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

把JQuery代碼改為

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

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

顯示效果如下：

demodownload

2、設(shè)置第三個(gè)div的css z-index 值

我們還可以設(shè)置插入的div的 z-index 值，該值要大于第二個(gè)div的z-index值。如該實(shí)例中，第二個(gè)div的z-index值是1，那么可以把插入的div的z-index值設(shè)為2，這樣就可以讓該div位于第二個(gè)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設(shè)置z-index來表示層的上下關(guān)系，你如果還不十分了解，可看看此文詳解css z-index的值使用區(qū)別:-1,0,1,auto,999。

總結(jié)

本文介紹了如何通過JS插入一個(gè)div，并讓該div位于上面而不被其他div遮住?？梢酝ㄟ^插入的方法達(dá)到目的，也可通過更改z-index來設(shè)置層的上下關(guān)系。

標(biāo)簽: before方法  after方法  div  z-index