您可以在不影响 Box 大小的情况下显示图像吗？

Question

嘿，在页脚上工作，我想在某个位置添加图像，但是当我添加它时，它会影响 Box 的大小（应该如此），因为我将它放在框内并且我想知道是否可以将其设置为背景或所有页脚的后面，如果这样做有意义而不影响框。

这就是我所拥有的：

<Box
        px={{ xs: 1, sm: 6 }}
        py={{ xs: 3, sm: 8 }}
        bgcolor="text.secondary"
        color="white"
      >
        <Container maxWidth="lg">
          <ThemeProvider theme={Oxanium}>
          
            <Grid container spacing={5}>
              <Grid item xs={12} sm={4}>
                <Box borderBottom={1}>
                  <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>Social Media</Typography>
                </Box>
                <Box sx={{ display: "flex" }}>
                  <Box>
                    <IconButton href="">
                      <TwitterIcon />
                    </IconButton>
                  </Box>

                  <Box>
                    <IconButton href="" color="inherit">
                      <FacebookIcon />
                    </IconButton>
                  </Box>

                  <Box>
                    <IconButton href="" color="inherit">
                      <InstagramIcon />
                    </IconButton>
                  </Box>

                  <Box>
                    <IconButton href="" color="inherit">
                      <YouTubeIcon />
                    </IconButton>
                  </Box>

                  <Box>
                    <IconButton href="" color="inherit">
                      <Icon>
                        <img src={TwitchIcon} height={25} width={25} />
                      </Icon>
                    </IconButton>
                  </Box>
                </Box>
              </Grid>

              <Grid item xs={12} sm={4}>
                <Box borderBottom={1}>
                  <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>Gamer Tag</Typography>
                </Box>
                <Box sx={{ display: "flex" }}>
                  <Box>
                    <IconButton href="" color="inherit">
                      <Icon>
                        <img src={SteamIcon} height={25} width={25} />
                      </Icon>
                    </IconButton>
                  </Box>
                  <Box>
                    <IconButton href="/" color="inherit">
                      <Icon>
                        <img src={EpicGamesIcon} height={25} width={25} />
                      </Icon>
                    </IconButton>
                  </Box>
                </Box>
              </Grid>

              <Grid item xs={12} sm={4}>
                <Box borderBottom={1}>
                  <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> Server </Typography>
                </Box>
                <Box sx={{ display: "flex" }}>
                  <Box>
                    <IconButton href="" color="inherit">
                      <Icon>
                        <img src={DiscordIcon} height={25} width={25} />
                      </Icon>
                    </IconButton>
                  </Box>
                </Box>
              </Grid>
            </Grid>

            <img src={Duskull} height={100} width={100} />
            
          </ThemeProvider>
        </Container>
      </Box>

看起来是这样的：

这是没有 gif 的样子：

这是我想要达到的目标：

Sandbox

最接近我想要的结果

<Box style={{ right:235, position: "absolute",  alignSelf: "flex-end" }}>
   <img src={Duskull} height={100} width={100} />
</Box>

其他任何东西都只是在页面中修复它，或者在页面角落本身而不是那个小黑盒子。

Answer 1

我会给 GIF 绝对位置以使其脱离页面流，因此它不会影响框样式和页脚容器相对位置，因此 GIF 仍位于页脚中，然后将 GIF 定位为右 0 和顶部/底部属性。