如何用CSS让img元素覆盖在HTML的H1标签文字上方？

我想让图片放在容器内，覆盖在H1标签的文字上方，但现在图片只显示在文字旁边，该怎么实现？

原JSX代码 #

const Login = () => {
        return(
        <div className="login-container">
        <form className='log' >            
        <img className='img'
        src={logo}
        alt="logo"/>
        <hi> Hello there</hi>
        <input placeholder="enter email"/>
        <input placeholder="password"/>
        <button type="submit">Submit</button>
        </form>
        </div>
 )
}

原CSS样式 #

.login-container {
        width: 600px;
        height: 500px;
        margin-top: 20px;
        margin-bottom: 10px;
        margin-left: 350px ;
        display: flex;
        border: 7px solid grey;
        background-color: white;
        border-radius: 10px;
        align-items: center;
        justify-content: center;
}
.log{
        text-align: center;
        columns: 170px;
        position: relative;
        display: block;
        margin-left: 190px;
        margin-right: 180px;
        width: 200px;
        height: 170px;
        border: 10px solid rgb(140, 128, 168);
        border-radius: 10px;
        align-items: center;
        justify-content: center;
}
 input{
        margin-top: 30px;
        text-align: center;
        border-radius: 30px;
 }

 h1 { 
        font-family: Lato, sans-serif;
        color-scheme: blue;
        display: block;
 }

 img { 
        width: 20px;
        height: 20px;
        border-radius: 30px;
        margin-left: 60px;
  }

解决方案 #

要实现图片覆盖在H1文字上方，核心是利用CSS绝对定位，结合父容器的相对定位来控制图片位置，同时修正原代码中的几个错误：

1. 修正JSX标签错误

把<hi>改为<h1>，否则H1样式不会生效。

2. 调整CSS样式

• 移除.log的columns属性（该属性会强制内容分栏，导致图片和文字并排）
• 将.log改为flex垂直布局，让表单元素按垂直方向排列
• 给图片设置绝对定位，相对于.log容器定位到H1上方
• 修正样式属性错误（color-scheme改为color，全局img选择器改为类选择器.img）

修改后的代码 #

JSX代码

const Login = () => {
  return(
    <div className="login-container">
      <form className='log' >            
        <img className='img' src={logo} alt="logo"/>
        <h1> Hello there</h1>
        <input placeholder="enter email"/>
        <input placeholder="password"/>
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

CSS样式

.login-container {
  width: 600px;
  height: 500px;
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 350px ;
  display: flex;
  border: 7px solid grey;
  background-color: white;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
}
.log{
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  width: 200px;
  height: 170px;
  border: 10px solid rgb(140, 128, 168);
  border-radius: 10px;
  align-items: center;
  justify-content: center;
}
input{
  margin-top: 30px;
  text-align: center;
  border-radius: 30px;
}

h1 { 
  font-family: Lato, sans-serif;
  color: blue;
  margin: 0;
}

.img {
  width: 20px;
  height: 20px;
  border-radius: 30px;
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
}

关键说明 #

• .log设置position: relative后，内部绝对定位的元素会以它为基准
• 图片的top值可以根据需求调整，transform: translateX(-50%)确保图片水平居中覆盖在H1上方
• 改用flex垂直布局后，表单元素的排列更合理，也避免了分栏导致的并排问题

内容的提问来源于stack exchange，提问作者willd