flex 怎么使div浮动在外层

发布于 2022-09-11 14:51:22 字数 985 浏览 15 评论 0

clipboard.png

请问怎么实现右下角的图标距离底部122rpx 一直悬浮在右边。使用的flex布局,我这样写不生效呢。
我的代码如下:

   <view class="flex_column"> //最外层view
     <view class="rightFlot"> 
         <view class="barrage background-feef88">
             <image src="../../static/img/barrage.png"></image>
         </view>
     </view>
  </view>
.flex_column{
  flex-direction: column;
 .rightFlot{
    justify-content: flex-end;
    .barrage{ 
        width: 106upx;
        height: 106upx;
        justify-content: center;
        border-radius: 50%;
        line-height: 106upx;
        display: fixed;
        bottom: 122upx;
        right:0;
        z-index: 999;
        image{
            width: 70upx;
            height: 40upx;
            margin-top:33rpx;
        }
    }
}

}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

日裸衫吸 2022-09-18 14:51:22

rpx,你这是小程序哇,用position:fixed吧,我之前做固定悬浮右边也是用position:fixed;

.barrage{
    position:fixed;
    bottom:122rpx;
    right:0;
}
且行且努力 2022-09-18 14:51:22

flex 主要是用来进行一维布局的
而你要的脱离文档流应当使用 position: absolute // fixed

尴尬癌患者 2022-09-18 14:51:22

还是要用定位position,定位的元素会脱离flex布局,不会对其他兄弟元素有什么影响;

行至春深 2022-09-18 14:51:22

楼上说的对,用position很简单的.

.barrage {
    position: fixed;
    right: 0;
    bottom: 122upx;
}

我看你代码中有z-index、以及调整位置的right、bottom等属性,这些属性在不设置position属性(设为relative,absolute,fixed)的时候是不生效的。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文