Question

所以，我应该为作业制作一个致敬页面，我在图像上放了一些文字，文字是我的h3元素。当我的Macbook 13英寸屏幕全尺寸时，文本位于我想要的图像上的正确位置，但是当我最小化页面时，文本完全偏离图像并且低于图像。有什么问题？

.red-text {
  color: red;
}

.gray-background {
  background-color: #9c9fa3;
}

h1 {
  font-size: 70px;
  font-family: orbitron, sans-serif;
  text-align: center;
  position: relative;
  top: 30px;
}

h2 {
  font-size: 30px;
  text-align: center;
}

img {
  display: block;
  margin: 0 auto;
}

.image {
  position: relative;
  width: 100%;
}

h3 {
  position: absolute;
  top: 265px;
  left: 635px;
  width: 100%;
}

h4 {
  text-align: center;
  font-size: 25px;
}

p {
  text-align: center;
  font-size: 22px;
}

footer {
  text-align: center;
}

h5 {
  text-align: right;
}

ul {
  font-size: 17px;
}

<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">

<div class="gray-background">
  <h1 class="red-text">Nintendo</h1>
  <h2>One of the world's largest video game companies</h2>
  <div class="image">
    <img src="https://www.goombastomp.com/wp-content/uploads/2015/12/nintendo_consoles_wallpaper_by_shadow86sk-d4w4y71-1.jpg" style="width:40%" alt="" />
    <h3>Pictured above: The main Nintendo consoles</h3>
  </div>
  <ul>
    <li><strong>1889</strong> - Founded</li>
    <li><strong>1889-1956</strong> - Operated as a card company</li>
    <li><strong>1955-1974</strong> - New ventures: They tried many different business ventures through these years.</li>
    <li><strong>1974-1978</strong> - Early electronic era: Starting to dip their hands in to the video game relm.</li>
    <li><strong>1979-2003</strong> - Success with video games: This is when they developed some of their most successful consoles and games, games that have now become standards for all their consoles.</li>
    <li><strong>2004-2011</strong> - Nintendo DS and Wii: The DS was one of the first handheld systems with a touch screen capabilities. The Wii was one of Nintendos more successful consoles with it's Wii remote motion controls.</li>
    <li><strong>2011-2015</strong> - Nintendo 3DS and Wii U: The 3DS was the first 3D handheld system without the use of 3D galsses. The Wii U did not sell as many units as expected.</li>
    <li><strong>2015-present</strong> - Mobile and Nintendo Switch: Nintendo continues to develop mobile games and this year they released their new console the Switch. The Switch is selling very well for Nintendo and is still very hard to buy.</li>
  </ul>
  <p>"I think that inside every adult is the heart of a child. We just gradually convice ourselves that we have to act more like adults."</p>
  <footer><cite>- Shigeru Miyamoto</cite></footer>
  <h4>Check out more about Nintendo by clicking
    <a href='https://en.wikipedia.org/wiki/Nintendo#1956.E2.80.931974:_New_ventures' target="_blank">here.</a></h4>
  <h5>Written and coded by Preston Bayle.</h5>
</div>

Answer 1

您不希望您的h3标记在此处具有绝对位置 - 您希望以与其他标题标记相同的方式执行此操作。

试试这个

 h3 {
    text-align: center;    
    top: 265px;
    left: 635px;
    width: 100%;
  }

Answer 2

在更新的代码中查看H3标签上的CSS样式。无论浏览器大小如何，这都会使文本位于图像顶部。还有一个媒体查询可以减小较小设备的h3字体大小。

.red-text {
  color: red;
}

.gray-background {
  background-color: #9c9fa3;
}

h1 {
  font-size: 70px;
  font-family: orbitron, sans-serif;
  text-align: center;
  position: relative;
  top: 30px;
}

h2 {
  font-size: 30px;
  text-align: center;
}

img {
  display: block;
  margin: 0 auto;
}

.image {
  position: relative;
  width: 100%;
}

h3 {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0;
  width: 40%;
  margin: 0 auto;
}

@media only screen and (max-width: 600px) {
  h3 {
    font-size: 14px;
  }
}

h4 {
  text-align: center;
  font-size: 25px;
}

p {
  text-align: center;
  font-size: 22px;
}

footer {
  text-align: center;
}

h5 {
  text-align: right;
}

ul {
  font-size: 17px;
}

<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">

<div class="gray-background">
  <h1 class="red-text">Nintendo</h1>
  <h2>One of the world's largest video game companies</h2>
  <div class="image">
    <img src="https://www.goombastomp.com/wp-content/uploads/2015/12/nintendo_consoles_wallpaper_by_shadow86sk-d4w4y71-1.jpg" style="width:40%" alt="" />
    <h3>Pictured above: The main Nintendo consoles</h3>
  </div>
  <ul>
    <li><strong>1889</strong> - Founded</li>
    <li><strong>1889-1956</strong> - Operated as a card company</li>
    <li><strong>1955-1974</strong> - New ventures: They tried many different business ventures through these years.</li>
    <li><strong>1974-1978</strong> - Early electronic era: Starting to dip their hands in to the video game relm.</li>
    <li><strong>1979-2003</strong> - Success with video games: This is when they developed some of their most successful consoles and games, games that have now become standards for all their consoles.</li>
    <li><strong>2004-2011</strong> - Nintendo DS and Wii: The DS was one of the first handheld systems with a touch screen capabilities. The Wii was one of Nintendos more successful consoles with it's Wii remote motion controls.</li>
    <li><strong>2011-2015</strong> - Nintendo 3DS and Wii U: The 3DS was the first 3D handheld system without the use of 3D galsses. The Wii U did not sell as many units as expected.</li>
    <li><strong>2015-present</strong> - Mobile and Nintendo Switch: Nintendo continues to develop mobile games and this year they released their new console the Switch. The Switch is selling very well for Nintendo and is still very hard to buy.</li>
  </ul>
  <p>"I think that inside every adult is the heart of a child. We just gradually convice ourselves that we have to act more like adults."</p>
  <footer><cite>- Shigeru Miyamoto</cite></footer>
  <h4>Check out more about Nintendo by clicking
    <a href='https://en.wikipedia.org/wiki/Nintendo#1956.E2.80.931974:_New_ventures' target="_blank">here.</a></h4>
  <h5>Written and coded by Preston Bayle.</h5>
</div>

调整浏览器大小时，h3元素的文本会移动

2 个答案: