css React位置固定问题

enyaitl3  于 2023-01-27  发布在  React
关注(0)|答案(2)|浏览(187)

我有一个组件,它基本上是一个自定义按钮,带有position: fixed,我需要它渲染两次,一个挨着另一个,但是如果这个组件有position: fixed,我怎么实现呢?基本上,在同一个位置渲染两次。
下面是我的代码,其中FloatingButton是出现上述问题的组件:

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

下面是来自Button组件的CSS:

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

sulc1iza1#

position:fixed:带有position: fixed的元素是相对于viewport定位的,这意味着即使页面滚动,它也总是停留在同一个位置,所以从技术上讲,您的代码工作得很好。
现在,如果你想实现两个并排的“固定按钮”,方法之一是:-你应该把按钮的container设置为position:fixed,并且渲染没有fixed位置的按钮

mqkwyuun

mqkwyuun2#

您还可以在props中将right的值传递给FloatingButton,例如:
对于第一个按钮<FloatingButton right='32px'/>和第二个按钮<FloatingButton right='132px'/>,可以在按钮组件中将其指定为CSS属性

相关问题