CSS如何进行响应式定位（定位好元素之后，改变窗口大小元素的位置同样改变）

Question

正常情况下

改变窗口大小之后

如何让文字仍旧在img的固定位置

 <div class="bg">
            <img src="./page1_img.png" alt="" class="img-responsive">
            <div class="text">
                <p class="lims-text">全程质量管理平台</p>
                <p class="lims-des">人、机、法、料、环全过程实时管理</p>
                <span>LIMS全新升级版</span>
            </div>
        </div>

.bg {
            background-image: url('./bg_1.jpg');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            height: 1080px;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        
        .img-responsive {
            display: inline-block;
            height: auto;
            max-width: 100%;
        }
        
        .text {
            top: 30%;
            position: absolute;
            left: 46%;
        }
        
        .lims-text {
            font-weight: bold;
            font-size: 60px;
            color: #00E4FE;
        }
        
        .lims-des {
            margin-top: -40px;
            color: white;
            font-size: 30px;
        }
        
        .text span {
            color: white;
            font-size: 20px;
        }

用了flex + 绝对定位 但是改变窗口大小 就乱套了 文字的大小用了媒体查询 但是不用定位的位置也用媒体查询吧 求大神指教

Answer 1

 <div class="bg">
    <div class="content">
        <img src="./page1_img.png" alt="" class="img-responsive">
        <div class="text">
            <p class="lims-text">全程质量管理平台</p>
            <p class="lims-des">人、机、法、料、环全过程实时管理</p>
            <span>LIMS全新升级版</span>
        </div>
    </div>
 </div>

用一个标签包裹所有内容

.bg使用flex来控制.content在其内部的定位。去掉多余的相对和绝对定位

.img-responsive,.text,.lims-text,.lims-des等在.content内，使用flex排版

https://codepen.io/shuizhongy...

Answer 2

img 缩小了

然后发现文字是绝对定位，那么也给图片搞一下就好了。

其实建议你给外面包一层，然后基准大小。然后给外面那层定位