前端初学者求助：Header图片无法居中及Profile图片悬浮布局问题

问题1：Header图片无法居中 #

你的代码存在几个关键错误导致居中失效：

1. HTML id属性格式错误：img标签的id值不需要带#，你写的id="#header"应该改为id="header"，profile的id同理。
2. CSS选择器不匹配：CSS中使用的是.header类选择器，但HTML里对应的是id属性，需改为#header id选择器。
3. 内容元素放置错误：<head>标签仅用于存放页面元数据，不能放置img这类内容元素，浏览器会自动转移这类元素，但可能导致样式异常，必须将两张img移到<body>标签内。

修正后的核心代码片段 #

HTML（仅保留头部和图片部分）：

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 修正了name属性错误，应为viewport -->
  <link rel="stylesheet" href="Toy Story 4 style.css">
  <title>Toy Story 4</title>
</head>
<body>
  <img id="header" src="toy story 4.jpg">
  <img id="profile" src="toy story profile pic.jpg">

CSS（Header定位部分）：

#header {
  display: block;
  width: 100%;
  margin: 0 auto; /* 合并margin写法更简洁 */
}

问题2：Profile图片悬浮在Header下方并超出30% #

采用相对定位+绝对定位的组合实现该效果，步骤如下：

1. 给Header图片套一个容器，设置position: relative，作为Profile图片定位的参考基准。
2. 给Profile图片设置position: absolute，通过bottom: -30%让其30%的下半部分超出Header容器。

修正后的核心代码片段 #

HTML（图片部分）：

<body>
  <div class="header-container">
    <img id="header" src="toy story 4.jpg">
  </div>
  <img id="profile" src="toy story profile pic.jpg">

CSS（Profile定位部分）：

.header-container {
  position: relative;
  width: 100%; /* 和Header图片同宽 */
}

#profile {
  display: block;
  width: 500px;
  position: absolute;
  bottom: -30%; /* 让图片底部超出容器30% */
  left: 50%;
  transform: translateX(-50%); /* 绝对定位后用transform实现水平居中 */
}

完整修正代码 #

完整HTML #

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="Toy Story 4 style.css">
  <title>Toy Story 4</title>
</head>
<body>
  <div class="header-container">
    <img id="header" src="toy story 4.jpg">
  </div>
  <img id="profile" src="toy story profile pic.jpg">

  <h1>Toy Story 4</h1>
  <!-- 修正空img标签，controls是video专属属性，若要添加视频需改为video标签 -->
  <video controls width="500"></video>
  <div>
    <h2>Synopsis</h2>
    <p>Woody, Buzz Lightyear and the rest of the gang embark on a road trip with Bonnie and a new toy named Forky. The adventurous journey turns into an unexpected reunion as Woody's slight detour leads him to his long-lost friend Bo Peep. As Woody and Bo
      discuss the old days, they soon start to realize that they're worlds apart when it comes to what they want from life as a toy.</p>
  </div>
  <div>
    <h2>Characters</h2>
    <h3>Woody</h3>
    <p>Played by Tom Hanks</p>
    <p>Woody is a smart, determined, and passionate man, and would do anything for his nearest and dearest friends. He considers his friends as family and he tries his best to keep them together at all times. Yet, he is a flawed character.</p>
  </div>
  <h3>Buzz Lightyear</h3>
  <p>Played by Tim Allen</p>
  <p>Buzz is a toy from a science fiction franchise of the same name. In his fictional backstory, Buzz is a universal space ranger from the Intergalactic Alliance and the captain of the Alliance's team. Buzz is trained in several forms of martial arts and
    is a highly skilled warrior in hand to hand combat.</p>
  <h3>Forky</h3>
  <p>Played by Tony Hale</p>
  <p>Forky is a white plastic spork outfitted with a pair of different sized googly eyes; a mouth made out of blue plasticine; two halves of a popsicle stick for feet, stuck on with modelling clay; arms and hands made out of a red pipe cleaner; and a unibrow
    made out of red plasticine.</p>
  <h3>Bo Peep</h3>
  <p>Played by Annie Potts</p>
  <p>"Little" Bo Peep is a character in the Toy Story franchise and a main character of the fourth film. She is a porcelain shepherdess figurine and Sheriff Woody's girlfriend in the films. Bo Peep and her sheep were originally adornments of Molly Davis' bedside
    lamp.</p>
  <p>Top five countries where Toy Story 4 grossed the highest during opening week:</p>
  <ol>
    <li>United States</li>
    <li>Canada</li>
    <li>Brazil</li>
    <li>India</li>
    <li>Nigeria</li>
  </ol>
  <fieldset>
    <legend>Comments</legend>
    <div>
      <label for="comments">Leave a comment!</label>
      <input type="text" id="comments" name="comments" required />
    </div>
  </fieldset>
</body>
</html>

完整CSS #

body {
  background-color: rgb(14, 173, 225);
  margin: 0; /* 移除默认body边距，避免布局偏移 */
}

h1,h2,h3 {
  color: rgb(161, 29, 0);
  margin: 0px auto;
  text-align: center; /* 标题居中，提升页面美观度 */
}

h1:hover, h2:hover, h3:hover, a:hover {
  color: rgb(255, 0, 0);
}

.header-container {
  position: relative;
  width: 100%;
}

#header {
  display: block;
  width: 100%;
  margin: 0 auto;
}

#profile {
  display: block;
  width: 500px;
  position: absolute;
  bottom: -30%;
  left: 50%;
  transform: translateX(-50%);
}

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