按鈕放到圖片上，z-index和絕對定位

說明： 最近在做一個banner輪播圖 圖的左下方有個 登錄的按鈕。 按鈕死活都放不到圖片上邊，css太菜  特此記錄一下

擺放下效果： 無論 輪播圖怎么動 按鈕不動

 

 

 

 

 

 思路： 布局   banner輪播圖的div是外層的  然后里邊是按鈕的div，通過margin-top和margin-left對按鈕的位置進行限定，最后用z-index和position屬性來讓按鈕放到所有元素最頂層

 代碼：

//使用element-ui的banner組件

　　　<div id=" banerdiv">

        <el-carousel indicator-position="outside" height="589px">

          <el-carousel-item v-for="(item,k) in bannerArr" :key="k">

            <img :src="item.img" style="width: 100%;height: 100%" />

          </el-carousel-item>

        </el-carousel>

        <div class=" btnDiv">

          <router-link :to="{ path: 'login'}">

            <button class="start">

              <a href>立即試用</a>

            </button>

          </router-link>

        </div>

      </div>

//css樣式 bannerdiv並沒有什么樣式，只是作為 margin 的參考限定

. btnDiv {

   margin-top: -150px;

   margin-left: 73px;

   z-index: 9999;

  width: 202px;

   position: absolute;

}

 這里簡介z-index屬性：圖片截取自w3cschool

 

 

position: absolute;表示絕對定位