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

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>