时间戳

首页 > 解决方案 > 无论屏幕大小如何，在元素上保持相对于其他元素的相同位置

html - 无论屏幕大小如何，在元素上保持相对于其他元素的相同位置

问题描述

我有一个带有一个大 svg 和三个带有文本的 div 的设计，绝对使用 CSS 定位。无论屏幕大小如何，我都需要 div 保持它们相对于 svg 的位置。也就是说，我希望文本块始终与“分支”保持对齐。我怎么做？

链接到 Codepen

div {
  text-align: center;
  position: relative;
}

.box-1,
.box-2,
.box-3 {
  position: absolute;
  width: 200px;
  text-align: left;
}

.box-1 {
  top: 50px;
  left: 33%;
}

.box-2 {
  top: 650px;
  left: 52%;
}
.box-3 {
  top: 1210px;
  left: 36%;
}

.left {
  text-align: right;
}
<div>
  <svg 
    width="185" 
    height="1668" 
    fill="none"
    aria-hidden="true"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M39.5 1665c-19.95 2.85 41.323-1.26 64.771-2.89 3.419-.23 5.362-4.82 4.327-8.09-14.809-46.76 97.758-206.14 69.902-341.52-11.147-54.17-45.229-110.52-81-155.5-29.944-37.66-66.9-57.98-80.5-113-4.3-17.39-7.5-61 0-101 7.48-39.898 75.652-305.146 75.999-306.495l.004-.017c.299-1.343 25.703-115.554 35.497-210.988 17.272-168.304-21.4-281.623-76.296-423C95.73 126.455 138.393 276.328 117 463.5c-15.937 139.438-77.961 332.565-86.5 368-18.986 129-54 199 5.5 271.5s115.046 146.4 126 209.5c27.348 157.54-98 349-122.5 352.5z" 
      fill="#EAECF0" 
      stroke="#E9EBEF" 
      strokeWidth="4" 
      strokeLinejoin="round"
    />
    <path 
      d="M82 1252.94c29.227 11.7 82.878 10.06 82.878 49.65l-3.649 7.89C155 1269.5 95.918 1268.2 82 1252.94zM53.699 105.984c19.085 10.888 35.112 33.394 49.806 52.952v-15.085c-5.59-14.883-38.466-35.764-49.806-42.914-4.816-3.037-14.605-3.284 0 5.047zM78.5 715c-10.345 8.248-21.099 16.711-23.44 30.98l2.968 8.728C64 730.258 97.5 707 111.234 699.579 100.824 702.026 87.1 708.144 78.5 715z" 
      fill="#E9EBEF"
    />
  </svg>
  <div  class="box-1 left">
    <h3>Text</h3>
    <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
  </div>
    <div class="box-2">
      <h3>Text</h3>
      <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
    </div>
    <div class="box-3 left">
      <h3>Text</h3>
      <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
    </div>
</div>

标签： htmlcss

解决方案

您的文本以百分比定位在周围 div 的左边缘。如果你想让 svg 表现得一样，你也必须定位它。

我添加了可以做到这一点的css。主要理由是对待应该以相同方式表现相同的元素。

更新：

您可以在元素上使用填充.text-box来影响文本的位置。同样，该框以与 svg 完全相同的方式定位（按视口宽度的百分比）。要微调相对于 svg 画布的位置，请使用为百分比定位添加固定偏移量的东西。

（这些.inner元素仅用于显示带有背景的填充。您可以在执行此操作时删除它们。）

.container {
  position: relative;
}

.text-box,
svg {
  position: absolute;
  left: 33%;
}

svg {
  border: 1px solid red;
}

.text-box {
  width: 200px;
  text-align: right;
  border: 1px solid green;
}

.text-box .inner {
  background: rgba(255, 255, 0, 0.1);
}

.box-1 {
  top: 50px;
  padding-left: 20px;
}

.box-2 {
  top: 650px;
  padding-left: 40px;
}

.box-3 {
  top: 1210px;
  padding-left: 60px;
}
<div class="container"> <svg width="185" height="1668" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M39.5 1665c-19.95 2.85 41.323-1.26 64.771-2.89 3.419-.23 5.362-4.82 4.327-8.09-14.809-46.76 97.758-206.14 69.902-341.52-11.147-54.17-45.229-110.52-81-155.5-29.944-37.66-66.9-57.98-80.5-113-4.3-17.39-7.5-61 0-101 7.48-39.898 75.652-305.146 75.999-306.495l.004-.017c.299-1.343 25.703-115.554 35.497-210.988 17.272-168.304-21.4-281.623-76.296-423C95.73 126.455 138.393 276.328 117 463.5c-15.937 139.438-77.961 332.565-86.5 368-18.986 129-54 199 5.5 271.5s115.046 146.4 126 209.5c27.348 157.54-98 349-122.5 352.5z" 
            fill="#EAECF0" 
            stroke="#E9EBEF" 
            strokeWidth="4" 
            strokeLinejoin="round"
          />
          <path d="M82 1252.94c29.227 11.7 82.878 10.06 82.878 49.65l-3.649 7.89C155 1269.5 95.918 1268.2 82 1252.94zM53.699 105.984c19.085 10.888 35.112 33.394 49.806 52.952v-15.085c-5.59-14.883-38.466-35.764-49.806-42.914-4.816-3.037-14.605-3.284 0 5.047zM78.5 715c-10.345 8.248-21.099 16.711-23.44 30.98l2.968 8.728C64 730.258 97.5 707 111.234 699.579 100.824 702.026 87.1 708.144 78.5 715z" 
            fill="#E9EBEF"
          />
        </svg>
  <div class="text-box box-1 left">
    <div class="inner">
      <h3>Text</h3>
      <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
      <p>20px padding to the left</p>
    </div>
  </div>
  <div class="text-box box-2">
    <div class="inner">
      <h3>Text</h3>
      <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
      <p>40px padding to the left</p>
    </div>
  </div>
  <div class="text-box box-3 left">
    <div class="inner">
      <h3>Text</h3>
      <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
      <p>60px padding to the left</p>
    </div>
  </div>
</div>

推荐阅读