HTML CSS响应改变浏览器大小的位置答案

【问题标题】：HTML CSS Responsive Changing Position on size of browserHTML CSS响应改变浏览器大小的位置
【发布时间】：2023-03-12 12:45:01
【问题描述】：

我想将文本放在图像的底部。当我缩小浏览器时，我希望文本始终保持在同一个位置。

目前，图像的大小和位置正在按预期改变，但文本没有改变并保持在正确的位置。

我怎样才能让文本响应并保持在同一个位置？那么，无论浏览器的大小如何，我怎样才能让我的网站喜欢下面的图片呢？我在下面尝试了文章 h3，但它不起作用。

图片：

/*flexbox*/

div {
    width: 80%;
    margin: 1em auto;
    padding: 1em;
    box-sizing: border-box;

    display: flex;
    flex-flow: wrap;
}

div > * {
    flex: 1 1 30%;
    justify-content: flex-end;
    padding: 1em;
    border: solid .125em #00aaff;
}

div h1 {
    flex: 1 1 68%;
    font-size: 2.05em;
    text-align: center;
    padding: .5em;
    padding-bottom: .5em;
}

/*IMAGES*/
img{
    width: 100%;
    height: auto;
}

/*PAINTING SUMMARY*/
p{
    padding:2em;
}

/*SUN NAME OVER IMAGE*/
article h3{
    position: absolute;
    left: 20%;
    top:72%;
    width: 20%;
    height: auto;
    font-size: .75em;
    font-family: Arial, Helvetica, sans-serif;
    border: solid 1px darkgray;
    line-height: 1.2;
    text-align: center;
    z-index: 2;
    background: white;
    color: black;
    opacity: 0.8;
}

/*TABLET*/
@media screen and (max-width: 870px)
{
    .div {
        width: 80%;
        background: red;
        flex-flow: column wrap;
        justify-items: center;
        align-items: center;
    }
    
    article h3{
        position: absolute;
        left: 20%;
        top:72%;
        width: 20%;
        height: auto;
        font-size: .75em;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        z-index: 2;
    }
}

@media screen and (max-width: 602px)
{  
    div {
        width: 80%;
        background: teal;
        color: white;
        flex-flow: column nowrap;
        justify-items: center;
        align-items: center;
    }
    
    article h3{
        position: absolute;
        left: 20%;
        top:72%;
        width: 20%;
        height: auto;
        font-size: .75em;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        z-index: 2;
    }
    
    div h1 {
        width:90%;
    }

    }
    
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Practice</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <link rel="stylesheet" href="practice/lab6.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
    
<body>
    
    <div>
        <h1>Museum of the Arts</h1>
        <section>
            <img src="images/sunday.jpg"/>
        </section>
         
        <section>
            <p><span>Sunday Afternoon on the Island of La Grande Jatte</span>, painted in 1884, is one of Georges Seurat's most famous works. It is a leading example of pointillist technique, executed on a large canvas. Seurat's composition includes a number of Parisians at a park on the banks of the River Seine.
         </section>
        
        <article>
            <h3><cite>Sunday Afternoon on the Island of La Grande Jatte</cite></h3>
        </article>
        
        <main>
            <h3><cite>Nighthawks</cite></h3>
        </main>
        
         <section>
             <p><span>Nighthawks</span> is a 1942 oil on canvas painting by Edward Hopper that portrays people in a downtown diner late at night. It has been described as Hopper's best known work and one of the most recognizable paintings in American art Within months of its completion, it was sold to the Art Institute of Chicago on May 13, 1942 for $3,000.</p>
         </section>
         
        <section>
            <img src="images/nighthawk.jpg"/>
        </section>
        
        
    </div>
    
</body>
</html>

【问题讨论】：

标签： html css responsive-design flexbox

【解决方案1】：

您可以通过使用 2 个 CSS 属性来实现：

将图像设置为DIV的背景，示例如下：https://www.w3schools.com/cssref/pr_background-image.asp
将文本位置属性定义为相对于 div，示例如下：https://www.w3schools.com/cssref/pr_class_position.asp

希望对您有所帮助！

【讨论】：