HTML 为什么我的文本在 div 之外开始？

Question

#image-container{
    position: relative;
    display: block;
}

#image-container img{
    width: 100%;
    height: auto;
    display: block;
}

#short-text{
    position: absolute;
    font-size: 2vw;
    color: black;
}

<div id="image-container">
   <img src="./path/to/image.png" alt="Some image">
   <span id="short-text">
      Short text
   </span> 
</div>

为什么文本出现在图像的正下方而不是上方？

我尝试更改“#image-container”、“#image-container img”和“#short-text”的位置和显示。 我希望其中一种组合能够让短文本出现在图像上方，而后续内容出现在图像下方，但我不能两者兼得

Answer 1

您需要调整#image-container 中#short-text 元素的位置。

<div id="image-container">
    <img src="./path/to/image.png" alt="Some image">
    <span id="short-text">Short text</span>
</div>

#image-container {
    position: relative;
    display: block;
}


#image-container img {
    width: 100%;
    height: auto;
    display: block;
}

#short-text {
    position: absolute;
    top: 0; /* Adjust the value as needed */
    left: 0; /* Adjust the value as needed */
    font-size: 2vw;
    color: black;
}

此设置可确保文本出现在图像上方，并根据顶部和左侧属性定位。调整这些属性，将文本准确放置在图像上您想要的位置。