按钮放到图片上，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;表示绝对定位