如何让同级的元素定位不变

场景：

如上图，红框图和黄框为同级元素，要求无论浏览器大小如何变化，要求这两个元素相对位置不变；

思路：二者相对于大框都设置为100%的宽高；

红黄框相对于黑色背景设置百分比的定位；

另：设置transform:translateX(xxpx)更准确

代码如下：

            <div class="imgs">
              <img :src="paramsetimg" alt="">
              <div class="tips">
                <p class="imagetext">{{imageText}}</p>
                
              </div>

            </div>

      .imgs {
        background: #000;
        width: 100%;
        height: 100%;
        position: relative;
        img {
          max-width: 100%;
          // width: 100%;
          max-height: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
        }
        .tips {
          width: 100%;
          height: 100%;
          position: relative;
          .imagetext {
            position: absolute;
            left: 50%;
            transform: translateX(110px);
            top: 34%;
            height: 60px;
            padding: 16px;
            background: #fff;
            color: #4d8cfb;
            font-size: 20px;
            border-radius: 30px;
          }
        }
      }