reactNative 中使用position:absolute绝对定位引起的遮挡

最新推荐文章于 2024-06-26 16:59:10 发布

khadijiah

最新推荐文章于 2024-06-26 16:59:10 发布

阅读量2.8k

点赞数

分类专栏：淌坑 reactNative 文章标签： css css3 html

本文链接：https://blog.csdn.net/khadijiah/article/details/121699763

版权

淌坑同时被 2 个专栏收录

7 篇文章

订阅专栏

reactNative

7 篇文章

订阅专栏

本文介绍了在Android开发中如何通过elevation属性解决绝对定位卡片标签在Android上的显示问题，展示了如何使用elevation调整元素的层级，确保标签浮于卡片之上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上图吧，想要的效果，就是给卡片右上角加一个标签：

position:absolute得到的效果，安卓上不好截图，不放图了，就是呗压在了卡片下面，自行脑补吧

解决办法：

1、和web不同zIndex不好使，999也不好使

2、发现一个新属性（我没用过的就是新的~）：elevation

上代码：

  skuTagNew: {
    flex: 1,
    height: px2dp(35),
    paddingRight: px2dp(7),
    paddingLeft: px2dp(7),
    backgroundColor: 'rgb(255,80,0)',
    position: 'absolute',
    top: px2dp(0),
    right: px2dp(0),
    borderRadius: px2dp(8),
    alignItems: 'center',
    justifyContent: 'center',
    elevation: 999, // 这是重点！
  },

好了，好使了舒服了