请选择 进入手机版 | 继续访问电脑版

[BUG] position定位bug

[复制链接]
Not Foundcl 发表于 2022-1-5 11:03:28
本帖最后由 Not Foundcl 于 2022-1-5 11:05 编辑

子元素相对于父元素定位,属性top为负数时,安卓子元素会被父元素遮住,类似于切掉负数的一部分,IOS正常,代码如下:<view class="workconbox">
   <view class="point"></view>
</view>


.workconbox {
    width: 92%;
    height: 60px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 10px auto 0;
    background-color: #ffffff;
    box-shadow: 0px 3px 2px rgba(251, 131, 78, 0.1);
    border-radius: 8px;
}
.point{
    width: 14px;
    height: 14px;
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: #FD7154;
    border-radius: 50%;
    z-index: 99;
}




附图右上角的原点:

QQ图片20220105110133.png

3条回复

技术支持-F 管理员 26299Y币
已反馈给相关技术
Not Foundcl 马路杀手 502Y币
好的,有结果请回复此帖子
技术支持-F · 2022-1-5 15:12已反馈给相关技术
常山赵子云 管理员 6312Y币
目前圆角会把子节点都截取,也可能会把阴影也截取。可以在外面包一层,类似这样:

        <view class="wrap">
                <view class="workconbox">
                        <text>text</text>
                </view>
                <view class="point"></view>
        </view>

.wrap {
    width: 92%;
    height: 60px;
    margin: 10px auto 0;
}
.workconbox {
        height: 60px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 0px 3px 2px rgba(251, 131, 78, 0.8);
    border-radius: 8px;
}
.point{
    width: 14px;
    height: 14px;
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: #FD7154;
    border-radius: 50%;
    z-index: 99;
}

同时,如果阴影被圆角冲掉了,建议可通过设置阴影背景图片的方式实现阴影,背景图片渲染效率还更高。
您需要登录后才可以回帖 登录

本版积分规则