将示例文本框保留在图像顶部的同一位置

Question

我有一个带盒子的简单图像。对于上传的示例，我使用虚拟图像作为占位符。我想要做的是将文本（示例，示例2，示例3）保持在同一位置，即使页面调整大小，但它不起作用。怎么能解决这个问题。

    .center {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 50%;
        }

        #example {
            color:white;
            position: absolute;
            top: 50px;
            left: 680px;
            width:300px;
            height: 50px;
            padding: 5px;
            background-color: transparent;
            
        }
        #example2 {
            color:white;
            position: absolute;
            top: 120px;
            left: 930px;
            width:300px;
            height: 50px;
            padding: 5px;
            background-color: transparent;
            
        }
        
        #example3 {
            color:white;
            position: absolute;
            top: 200px;
            left: 730px;
            width:300px;
            height: 50px;
            padding: 5px;
            background-color: transparent;
            
        }

        #container {
            position: relative;
        }

   
    <div id="container">
        <div id="example">I am Training | Apr 16 – Jun 15<br> 60 days</div>
        <div id="example2">Compliance |<br> Jun 11 – Jul 11</div>
        <div id="example3">Harassment Free<br> Work May 11</div>
        <img class="center" src="https://dummyimage.com/758x428/000/fff" />
    </div>

Answer 1

我猜“在同一个地方”你的意思是“在相对于图像的相同位置”。我不知道你是否谈论宽度和高度，但我想象宽度。要实现这一点，不如给出绝对定位文本的“左”值，您可以使用百分比，就像我在代码段中所示：

（如果你想让文本垂直移动，你也可以在那里指定一个百分比）

.center {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 50%;
        }

        #example {
            color:white;
            position: absolute;
            top: 40px;
            left: 50%;
            width:300px;
            height: 50px;
            padding: 5px;
            background-color: transparent;
            
        }
        #example2 {
            color:white;
            position: absolute;
            top: 120px;
            left: 60%;
            width:300px;
            height: 50px;
            padding: 5px;
            background-color: transparent;
            
        }
        
        #example3 {
            color:white;
            position: absolute;
            top: 200px;
            left: 50%;
            width:300px;
            height: 50px;
            padding: 5px;
            background-color: transparent;
            
        }

        #container {
            position: relative;
        }

<div id="container">
        <div id="example">I am | Apr 16 – Jun 15<br> 60 days</div>
        <div id="example2">Medicaid Compliance |<br> Jun 11 – Jul 11</div>
        <div id="example3">Harassment Free<br> Work May 11</div>
        <img class="center" src="https://dummyimage.com/758x428/000/fff" />
    </div>