控制按钮在视频上，可是由于设置了
position:absolute，导致切换移动端时，按钮直接不见了，如以下代码;<template>
<el-carousel class="box" ref="carouselRef">
<el-carousel-item v-for="(videoSrc,index) in videoList"
:key="index">
<div class="contain"> <!--目的：按钮始终准确定位在视频区域的右下角，单靠.box无法固定，因为用的不是html的原生组件-->
<video class="toy_video" autoplay loop muted playsinline @click="">
<!--playsinline允许网页内联播放-->
<source
:src="videoSrc" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
<!--buy按钮叠加在视频上-->
<el-button class="buy"
:style="{backgroundImage
:`url(${buyImg})`}" ></el-button>
</el-carousel-item>
</el-carousel>
</template>
<style scoped lang="s
css">
.box{
position: relative; /* 相对定位 */
border-radius
: 25px;
overflow
: hidden;
height
: 100%;
/* 用于调试布局高度
background
: rgba(0,0,255,0.1);*/
margin-top
: 0;
line-height
: 0; // 清除行高空隙
font-size
: 0; // 防止文本撑开
}
.contain{
position: relative;
height
: 100%;
border-radius
: 25px;
}
/* 设置.el-carousel 的每一层样式，用于清楚一些其自带的默认样式 */
::v-deep .el-carousel {
height
: 100%;
border-radius
: 25px;
margin
: 0 !important;
padding
: 0 !important;
}
::v-deep .el-carousel__container {
height
: 100%;
border-radius
: 25px;
margin
: 0 !important;
padding
: 0 !important;
}
::v-deep .el-carousel__item {
height
: 100%;
border-radius
: 25px;
margin
: 0 !important;
padding
: 0 !important;
line-height
: 0;
}
/* 注意：必须确保整个布局链条上高度是明确传递下来的，否则<el-carousel class="box"> 的高度 不会受到 .left, .videos, .select 中 flex 样式的控制*/
.toy_video{
width
: 100%;
height
: 100%;
object-fit
: contain; /* 视频覆盖满 */
z-index
: 2;
margin
: 0;
padding
: 0;
display
: block;
}
.buy{
/* 直接写在
css里不一定生效
background-image
: url(&#
39;@/assets/buy_new.png&#
39;);*/
background-size
: cover; /* 图片覆盖整个按钮 */
background-
position: center;
width
: 198px;
height
: 96px;
z-index
: 6; /*确保按钮在视频上方*/
position: absolute; /* 绝对定位 */
right
: 1
32px;
bottom
: 65px;
/*
无效，因为绝对定位 (
position: absolute) 的元素，不再受 margin 的正常流影响
margin-left
: 6px;
margin-bottom
: 6px;*/
/* 用于调试布局高度 */
background
: rgba(0,0,255,0.1);
// background
: rgba(0,0,0,0); // 清除按钮的默认底色：白色
border-radius
: 30px;
/*background-color
: red; 临时测试 */
outline
: none; /*去除焦点状态的轮廓线 */
border
: none; /*去除按钮默认的边框 */
background-repeat
: no-repeat; /* 防止重复 */
}
</style>
本文探讨了在使用transform:translateZ(0)时遇到的position:fixed失效问题，并介绍了如何在WebKit内核浏览器中避免此问题。
扫一扫
3085
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
