设置z-index失效的的原因：transform

最新推荐文章于 2024-05-02 18:59:18 发布
最新推荐文章于 2024-05-02 18:59:18 发布
阅读量956 收藏 1
点赞数
分类专栏： 实践总结 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34086980/article/details/110133191
版权

在正常情况下，这个加号并没有问题：
在这里插入图片描述
当是遇到swiper之后，就被挡住了在这里插入图片描述
起初以为是z-index不够大，后来怎么调整也没用，差点以为是swiper对absolute元素有兼容问题，后来仔细研究了一下发现并不简单：
在这里插入图片描述

其中在定位上我使用了：

transform: translateX(-50%);

如果我修改为：

margin-left: -0.75rem;

则没有问题。
在这里插入图片描述
原因暂时还没找到，网上有提到就是transform是有副作用的，回头在研究研究

Armouy
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css设置z-index 失效的解决方法
09-25
设置z-index时必须要固定位置，这样设置它的值时才能奏效（例如 position:absolute;）下面是示例代码，在ff3.5.5和ie5.5~ie8.0RC1中通过，大家可以尝试着不固定其位置试试。
css3的transform造成z-index无效解决方案
09-25
主要介绍了css3的transform造成z-index无效解决方案,需要的朋友可以参考下
z-index无效失效的解决
weixin_34195142的博客
11-23 189
解决办法：父级元素加上position:relative;并设置z-index父级元素的z-index优先，其中包含的元素的z-index是相对于父级元素的index <div style="position:relative;z-index:2"> <p style="position:absolute;z-index:99"> ...(要在上层显示的内容）&lt...
iphoneX和iphone11浏览器z-index失效问题解决办法
12-14 1988
问题描述 使用swiper做轮播图，其中左右切换图片按钮在安卓手机或ios低版本浏览器正常显示，但是在iphoneX以上机型不显示，在图片下面，其中按钮是绝对定位，设置了z-index任然不能生效 原因 谷歌浏览器都是直接将一个盒子一个盒子理解成一块一块的，想分层就按照你的z-index高低来区分，而safari不是，safari是将整个浏览器的页面看成一个整体，虽然也是一块一块的，但是他的分层是按照视觉感来分层的，它认为在下面的代码块总比在上面的代码块离人的眼睛近，所以就应该覆盖在上面的代码块上面，不应该
父元素使用transform会使子元素和伪元素的z-index失效
最新发布
qq_73993347的博客
05-02 323
我有两个div元素，.box元素具有transform属性，.son元素具有z-index:-1;但是如果我去掉.box元素的transform属性（看右边的.box样式表）首先，要想使用z-index属性，则元素的position属性必须。显然，.son元素的z-index失效了。.son元素的z-index可以生效。伪元素与子元素同理。
swiper插件的使用
quanmeiren的博客
04-14 640
6.这是CSS的页面。注意swiper插件层级很高。如果有头部样式的话，一定要在头部哪里加。3.在自己创建的HTML中先写个banner的地方。7.这是复制官网下来的JS放到自己的JS里面。4.然后看官网的教程跟着复制。2.下载最新的第一个文件。5.这是HTML的页面。
层级和轮播图
qq_59207203的博客
03-09 118
轮播图的设计与实现
swiper使用踩坑记录
baidu_41601048的博客
08-24 930
swiper插件踩坑
display 垂直居中
bangxionger9224的博客
06-12 280
/* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-co...
CSS3关于z-index不生效问题的解决
01-19
2.在有定位的情况下，该元素的z-index没有生效，是因为该元素的子元素后来居上，盖住了该元素，解决方式：将盖住该元素的子元素的z-index设置为负数 下拉框例子： 1.盖住的时候： 2.将下拉框的z-index设置为负数 ...
微信小程序swiper-显示多个item的内容(上一个,下一个)
前端_李嘉豪
10-20 4980
效果: 直接使用小程序的swiper组件就可以实现我们要的效果,但是我们注意swiper的高度问题,这是一个坑! 先贴上代码 <view class="swiper-box"> <swiper current="{{currentNum}}" bindchange='onChange' style='height:{{Hei}}' previousMargin="60rpx" nextMargin="60rpx"> <swiper-i
swiper自定义分页点击跳转指定页面
summer_gf的博客
05-26 4489
swiper自定义分页点击跳转指定页面 mySwiper.slideTo(index, speed, runCallbacks)，控制Swiper切换到指定slide。 参数名 类型 是否必填 描述 index num 必选 指定将要切换到的slide的索引 speed num 可选 切换速度(单位ms) runCallbacks boolean 可选 设置为false时不会触发transition回调函数 （更多方法见Swiper官网） 效果图如下： <!--banne
【微信小程序】z-index失效
Minf的博客
04-21 5583
CSS 属性 z-index 失效的原因
swiper 左右切换,获取当前页数
leos
03-07 4235
页是动态创建的这里就不写上了 <!-- swiper start--> <div class="swiper-container" style="z-index: 99999;"> <div class="swiper-wr...
实现一个 Swiper
熊宗的博客
11-22 3817
设计一个五图的 Swiper，设计稿如下： Swiper 的功能如下： 1.左右切换 2.无限轮播 3.任意图片数 接下来，详细介绍这三个功能的实现过程： 左右切换 这里指触发左右切换的手指交互，目前主要是以下两种： 方案 示意图 手指拖拽 手势判断 手指拖拽容易有性能问
微信小程序swiper如何获得当前页面的index
阵雨的博客
12-13 2万+
想要实现的效果：（滑动时显示当前页面index） 看小程序的官方文档 代码：index.wxml index.js data: { index: 1, }, onSlideChangeEnd: function (e) { var that = this; that.setData({
IE9下Swiper控件不能准确定位到指定页面问题的解决
hongweigg的专栏
10-10 1978
应用场景： 采用轮播控件对表格中的图片文件进行展示，当点击表格中的图片文件时，使用轮播控件（Swiper）显示指定的图片，同时，可以左右翻页，前后浏览所有的图片。 实现思路： （1）使用JS创建Swiper的躯干（Swiper相当于灵魂，灵魂必须依附肉体才能起作用）。 __createPreviewHtml: function(){ if($('#__sc1').
轮播图 - z-index 淡入淡出式
Mark
09-18 563
目录 1、轮播图是个啥？ 2、实现轮播图 1.0 3、实现轮播图 2.0 4、实现轮播图 3.0 5、实现轮播图 4.0 1、轮播图是个啥？ 随便打开一个网站，七八成的概率都能看到网站上至少有一个轮播的横幅图片，电商和视频类网站则更多。现在网上有很多已经封装好的轮播图功能模块，而且使用性能和展示效果都很好，可以直接拿过来用，这里推荐两个：Bootstrap里的Carousel、Swi...
微信小程序--组件覆盖之position和z-index
热门推荐
一如年少丶的博客
08-25 2万+
在写页面的时候，我们常常会有这样的需求，就是将一个组件置于另一个组件之上。那么，该如何来实现呢？ 其实，非常简单我们只需要在wxss里设置好position和z-index这两个属性就好了 1.父组件，必须将其position属性设置为relative .uploader-img { /* display: block; */ position: absolute; z-ind...
z-index 失效
09-01
当设置了父级元素的z-index属性后，子元素的z-index是相对于父级元素的index。因此，父级元素的z-index优先于子元素的z-index。这意味着如果父级元素设置了z-index，子元素的z-index设置可能会失效。这种情况通常发生在父元素和子元素都具有定位属性（position: relative或position: absolute）时。在这种情况下，可以尝试将子元素的z-index值设置为负值，以解决z-index失效的问题。 综上所述，当父元素具有定位属性并设置了z-index时，子元素的z-index可能会失效。此时可以尝试将子元素的z-index设置为负值来解决该问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [css z-index无效](https://blog.csdn.net/weixin_43478592/article/details/115394398)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [ie7下z-index失效问题解决方法(详细分析)](https://download.csdn.net/download/weixin_38519082/13982881)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值