1
因此，我应该为作业制作贡品页面，并且在图像顶部放置了一些文本，文本是我的h3元素。当我在Macbook 13英寸上显示屏幕全尺寸时，文本位于图像上我想要的正确位置，但是当我最小化页面时，文本完全脱离图像并在其下方。什么是问题？当调整浏览器大小时，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;
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>
问题是，你计算绝对定位和“幻数”是H3的布局 - 只有发生，因为你的浏览器大小的工作，当你编码任意值。为什么不只是定位像h1/h2这样的元素？ –
如果我将它定位为我的h1/h2元素，那么文本将集中在图像下面的页面中，这不是我想要的。文本应该位于图像右下角的图像顶部。 – batman091716
然后，您需要将图像和文本用'position：relative'封装在容器中，所以位置基于图像而不是浏览器窗口。在这一点上，你可以改变你的顶部/左边到底部：10px;正确：10px'或类似的东西。 –