React position fixed issue-CodePudding

So I have a component which is basically a custom button, with position: fixed, and I need it to render twice, one next to the other, but how can I achieve this if this component has position: fixed ? Basically, Is rendered twice in the same position.

Here is my code, where FloatingButton is the component with the issue above:

    return (
        <div className="details">
            <Grid container spacing={3}>
            <Grid item xs={12} md={12}>
                <Header {...headerProps} />
            </Grid>
            <Grid container className="inner-container" justifyContent="flex-end">
                
                    <Grid item>
                        {floatingButtonProps ? <FloatingButton {...floatingButtonProps} /> : null}
                    </Grid>
                    <Grid item>
                        {floatingButtonProps ? <FloatingButton {...floatingButtonProps} /> : null}
                    </Grid>
            </Grid>
        </Grid>
        </div>
    );

and here is the CSS from the Button component:

    min-width: 80px;
    max-width: 80px;
    height: 80px;
    border-radius: 40px;
    position: fixed;
    bottom: 32px;
    right: 32px;
    display: inline-flex;
    border-color: transparent;
    color: #fff;
    overflow: hidden;
    cursor: pointer;
    transition: max-width 0.5s;

CodePudding user response：

position:fixed: An element with position: fixed is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. SO technically your code is working just fine.

Now if you want to achieve two "fixed buttons" side by side. One of the ways is:- you should make the container of the button to be position:fixed and render the button without a fixed position

CodePudding user response：

You can also pass the value for right in props to FloatingButton like,

For first button <FloatingButton right='32px'/> and for second one <FloatingButton right='132px'/> and in the Button component, you can assign it as CSS property