How does flex float div on the outer layer

how to realize that the icon in the lower right corner is always suspended on the right from the bottom 122rpx. Using the flex layout, it doesn"t work if I write it this way.
my code is as follows:

   <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;
        }
    }
}

}

Flex css3 javascript

Sep.28,2021

elements that are positioned with positioning position, will deviate from the flex layout and will not have any impact on other sibling elements;

rpx, this is Mini Program. Wow, use position:fixed. I also used position:fixed; on the right side of fixed suspension before.

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

flex is mainly used for one-dimensional layout
, while the detached document stream you want should use position: absolute / / fixed

you're right upstairs. It's easy to use position.

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

I see that there are z-index, right, bottom and other attributes in your code, which do not take effect when you do not set the position property (set to relative,absolute,fixed).

Previous: The result of jpa query is not consistent with the reality.

Next: Both scandir and glob can only scan folders, but not files.