<samp id="wiaeu"><label id="wiaeu"></label></samp>
  • <samp id="wiaeu"><label id="wiaeu"></label></samp>
    <samp id="wiaeu"></samp>
  • <samp id="wiaeu"><sup id="wiaeu"></sup></samp>
  • 技術頻道導航
    HTML/CSS
    .NET技術
    IIS技術
    PHP技術
    Js/JQuery
    Photoshop
    Fireworks
    服務器技術
    操作系統
    網站運營

    贊助商

    分類目錄

    贊助商

    最新文章

    搜索

    JS用before()或after()插入div,利用z-index顯示在上面或下面

    作者:admin    時間:2022-5-5 20:25:18    瀏覽:

    在網頁交互中,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=content2div前面插入一個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 值

    我們還可以設置插入的divz-index 值,該值要大于第二個divz-index值。如該實例中,第二個divz-index值是1,那么可以把插入的divz-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  
    相關文章
      • IT熱文
      • 站長推薦
      公与熄电影手婬之手,日本少妇毛多水多的视频,要看肉感BBwBBWBBWBBw高清
      <samp id="wiaeu"><label id="wiaeu"></label></samp>
    • <samp id="wiaeu"><label id="wiaeu"></label></samp>
      <samp id="wiaeu"></samp>
    • <samp id="wiaeu"><sup id="wiaeu"></sup></samp>