按钮放到图片上，z-index和绝对定位

时间：2019-10-09 13:31:36 阅读：92 评论：0 收藏：0 [点我收藏+]

说明：最近在做一个banner轮播图图的左下方有个登录的按钮。按钮死活都放不到图片上边，css太菜特此记录一下

摆放下效果：无论轮播图怎么动按钮不动

技术分享图片

思路：布局 banner轮播图的div是外层的然后里边是按钮的div，通过margin-top和margin-left对按钮的位置进行限定，最后用z-index和position属性来让按钮放到所有元素最顶层

代码：

//使用element-ui的banner组件

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

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

</el-carousel-item>

</el-carousel>

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

</button>

</router-link>

</div>

//css样式 bannerdiv并没有什么样式，只是作为 margin 的参考限定

.btnDiv {

margin-top: -150px;

margin-left: 73px;

z-index: 9999;

width: 202px;

position: absolute;

}

这里简介z-index属性：图片截取自w3cschool

技术分享图片

position: absolute;表示绝对定位

原文：https://www.cnblogs.com/xuchao0506/p/11640980.html

踩

(0)

评论一句话评论（0）

分享档案

更多>