How does flex float div on the outer layer

clipboard.png

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

}

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).

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1c1fd4f-159de.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1c1fd4f-159de.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?