将文本放在图像顶部不起作用？

Question

我正在尝试将文本叠加到图像上，但也不知道如何。这可能是一个简单的问题，所以如果你能详细说明它是如何完成的，那将不胜感激。

import React from "react";
import { Typography } from "@material-ui/core";
import topImg from "/Users/rayhewitt/Desktop/react-portfolio/src/imgs/topImg.jpeg";
import useStyles from "./HeadStyles";

const Head = () => {
  const classes = useStyles();
  return (
    <div className={classes.top}>
      <img className={classes.image} src={topImg} alt="codingPic" />
      <Typography className={classes.intro} align="center">
        Hey, im Ray Hewitt a UI/UX frontend developer
      </Typography>
    </div>
  );
};

export default Head;

import { makeStyles } from "@material-ui/core";

export default makeStyles({
  top: {
backgroundColor: "rgba(8,89,145,255)",
height: "5000px",
  },
  image: {
paddingTop: "48px",
width: "100%",
zIndex: "100",
  },
  intro: {
justifyContent: "center",
position: "absolute",
zIndex: "101",
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

快速查看您的代码，您似乎就快到了。我认为唯一缺少的是父容器上的position: relative 和文本上的位置。

.top {
  position: relative;
}

.text {
  position: absolute;
  top: 0; // or left/right/bottom
}

应该可以的。

这里要理解的重要一点是，如果您 position: absolute 一个元素，那么它将坚持整个树中的任何父级 position: relative 或者如果没有任何父级，它将坚持到 body。将父容器标记为position: relative 会将文本粘贴到该父容器，然后您可以使用上/下/左/右控制定位。

旁注，如果文本不是display: flex，我不确定使用justify-content 是否有意义。