如何根据屏幕高度动态设置文本位置，使其在全浏览器尺寸下位于水平线上方

Hey there! The problem with your original code is that you’re using a fixed top: 685px value for the absolute-positioned text. This only works for one specific screen height—when the browser resizes, the image’s position and scaled height change, which throws off the text’s placement. Let’s use dynamic positioning techniques to make this work everywhere.

Solution 1: Flexbox (Simplest Approach) #

Flexbox makes it easy to stack elements vertically and keep them aligned automatically. We’ll wrap the text and image in a container, then let Flexbox handle the layout:

<style>
/* Reset default margins/paddings */
html, body {
  margin: 0;
  padding: 0;
}

/* Container to hold text and image */
.text-image-container {
  display: flex;
  flex-direction: column;
  /* Optional: Center content horizontally */
  align-items: center;
}

#txt {
  /* Optional: Add spacing between text and image */
  margin-bottom: 12px;
}

#pic {
  width: 100%;
  display: block; /* Remove default inline image gap */
}
</style>

<div class="text-image-container">
  <div id="txt">Hello world</div>
  <img 
    src="https://vignette.wikia.nocookie.net/uncyclopedia/images/4/47/Horiz-line.JPG/revision/latest/scale-to-width-down/600?cb=20050929041542" 
    id="pic" 
    alt="Horizontal line"
  >
</div>

How this works: Flexbox arranges the elements in the container vertically (thanks to flex-direction: column). Since the text comes before the image in the HTML, it naturally sits above the image. No fixed positioning values needed—everything adapts to the screen size automatically.

Solution 2: Relative + Absolute Positioning (For Custom Layouts) #

If you need to keep the image in a specific context (like overlaying text near the image but not directly above), you can use a relative-positioned container and absolute-positioned text tied to the image’s top edge:

<style>
html, body {
  margin: 0;
  padding: 0;
}

/* Parent container acts as positioning reference */
.image-wrapper {
  position: relative;
  width: 100%;
}

#pic {
  width: 100%;
  display: block;
}

#txt {
  position: absolute;
  /* Position text directly above the image */
  bottom: 100%;
  left: 0;
  /* Optional: Add spacing between text and image */
  margin-bottom: 12px;
}
</style>

<div class="image-wrapper">
  <img 
    src="https://vignette.wikia.nocookie.net/uncyclopedia/images/4/47/Horiz-line.JPG/revision/latest/scale-to-width-down/600?cb=20050929041542" 
    id="pic" 
    alt="Horizontal line"
  >
  <div id="txt">Hello world</div>
</div>

How this works: The image-wrapper uses position: relative to set a positioning context for the text. By setting bottom: 100% on the text, we anchor it to the top edge of the image—no matter how tall the image scales to be, the text will always sit directly above it.

Why Your Original Code Failed #

Fixed top values are static—they don’t account for changes in the image’s height or the browser’s viewport size. By tying the text’s position directly to the image (either through Flexbox flow or relative/absolute positioning), we ensure the layout adapts dynamically to any screen size.

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