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