Css MUI：在图像上重叠文本？

我试图使一半的文字溢出（覆盖）的图像上的权利

如何在网格项中实现这一点？我尝试使用位置“绝对”、“相对”和“z索引”，但在MUI的上下文中似乎不起作用。最好的方法是什么？先谢谢你

代码

import React, { useState } from 'react';
import './../App.css';
import {Grid, Typography, Paper, useMediaQuery, useTheme, Container, CardMedia} from '@material-ui/core';
import {makeStyles} from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  imgSpacing: {
    marginLeft: '20px'
},
  holder: {
    display: 'flex'
},
  holderText: {

},
  holderImg: {
    flexGrow: '1'
}
}))


function Homepage() {
  const classes = useStyles();
    return (
      <div>
        <section>

          <Container maxWidth={false} className={classes.img}>
            <Grid item xs={12} container>
              <Grid item xs={2} />
              <Grid item xs={5}>
                
                <div className={classes.holder}>
                  <div className={classes.holderText}>
                    <Typography >
                        <h1>
                        Lorem ipsum dolor sit amet.
                        </h1>
                        <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                    </Typography>
                  </div>

                  <div className={classes.holderImg}>
                    <Paper >
                        <CardMedia
                          component="img"
                          image={require(`../images/LA_night_car.jpg`)}
                        />
                    </Paper>
                  </div>
                </div>

              </Grid>
              <Grid item xs={2}>
                <Paper className={classes.imgSpacing}>
                    <CardMedia
                      component="img"
                      image={require(`../images/skater.jpg`)}
                    />
                </Paper>
              </Grid>
              <Grid item xs={3} />
           </Grid>
          </Container>
        </section>
      </div>
    );
}

export default Homepage;

import React，{useState}来自“React”；
导入“/../App.css”；
从“@material ui/core”导入{网格、排版、纸张、useMediaQuery、useTheme、容器、CardMedia}；
从'@material ui/core/styles'导入{makeStyles}；
const useStyles=makeStyles（（主题）=>({
imgSpacing：{
marginLeft:'20px'
},
持有人：{
显示：“flex”
},
持有者文本：{
},
holderImg：{
flexGrow：“1”
}
}))
功能主页（）{
const classes=useStyles（）；
返回(
Lorem ipsum dolor sit amet。

知识是一种美德，是一种美德，是一种美德，是一种美德。

);
}
导出默认主页；

供参考的图像

---

图像上的溢出文本不再是文本或图像，它是一个复合组件/容器，应该有自己的名称-比如

HomepageHeadliner

（如果可以的话，您一定要尝试使用更特定于您的域的名称！）

---

将它们放入所述容器中，并使用您对绝对定位的推理。如果文本位于DOM树中的图像之前，则不需要z索引。

我在包含文本和图像的代码中有“holder”（className={classes.holder）。我添加了“绝对”和“相对”定位。现在的问题是文本没有响应，并且在我调整屏幕大小时保持不变。您在此处使用

似乎不合适。如果您可以发布一个可复制的示例，我愿意进一步探讨此问题。这是一个工作示例，我非常感谢您的输入：