Question

我有一个以页面为中心的图像：

我想在每个图像文本上放置段落文本。我的第一个想法是使用position: absolute和position: relative。我使用div来包装我的图像和所有文本：

<div class="content-wrapper">
    <img src="SBDrawing.png" />

    <p id="D">D</p>
    <p id="d">d</p>
    <p id="H">H</p>
    <p id="D1">D1</p>
    <p id="D2">D2</p>
    <p id="n-dn">n-dn</p>
    <p id="n1">n1</p>
    <p id="d3">d3</p>
    <p id="DL">DL</p>
    <p id="dl">d1</p>
    <p id="H1">H1</p>
    <p id="h">h</p>
    <p id="b">b</p>
    <p id="Da">Da</p>
</div>

并使用了这个CSS：

  .content-wrapper{ 
       position: relative;
       height: 100%;
       width: 100%;
  }

  p{
   position: absolute;
  }

  #D{
    top:220px;
    left:310px; 
  }

  #H{
    top:320px;
    left:180px;
    transform: rotate(-90deg);  
  }

  #D1{
    top:245px;
    left:260px; 
  }

  #D2{
    top:280px;
    left:55px;  
  }

  #n-dn{
    top:215px;
    left:80px;  
  }

  #n1{
    top:280px;
    left:200px;
    transform: rotate(-90deg);  
  }

  #D3{
    top:245px;
    left:5px;   
  }

  #DL{
    top:255px;
    left:30px;  
  }

  #dl{
    top:245px;
    left:260px; 
  }

  #H1{
    top:295px;
    left:180px; 
    transform: rotate(-90deg);
  }

  #h{
    top:35px;
    left:120px;
    transform: rotate(-90deg);  
  }

  #b{
    top:35px;
    left:185px;
    transform: rotate(-90deg);
  }

  #Da{
    top:215px;
    left:330px; 
  }

只有前两种风格很重要，其余的用于定位文字。仅供参考，top和left值应该指代图像的原点（图像的左上角）。

我将照片导入Photoshop并使用“信息”选项卡查找每个段落标记的坐标。我以为一切都很好，但没有：

你可以看到一些相互重叠，有些甚至不靠近图像（看页脚）。有人可以找到问题吗？我给你15个代表！接受你的回答......

Answer 1

1 - 为了定位所有元素并且不让它们移出位置，您需要图像不改变大小。持有图像的content-wrapper不能使用百分比作为大小，因为它将根据其父元素调整大小。使用content-wrapper的设置宽度和高度。

2 - 使用可显示的最大测量值对html进行硬编码测量。

3 - 在你的css中，将text-align: right添加到包含测量值的元素中。

4 - 调整每个元素的top和left数字，直到它们位于您想要的位置。

5 - 从html中删除硬编码的测量文本。

Answer 2

神圣错误蝙蝠侠！

这样：

<p id="dl">d1<p>

与css不匹配

     #D1{
    top:245px;
    left:260px; 
  }

这样：

 <p id="d3">d3<p>

不符合

  #d3{
    top:245px;
    left:5px;
  }

尝试将您的包装器设置为当前具有的固定尺寸：

.content-wrapper{ 
       position: relative;
       height: 100%;
       width: 100%;
  }

Sice所有<p>代码的绝对值都是％，它无法正常工作，而是将div的width和height设置为相同的width和height你正在覆盖的img。（在px）

如何根据图像的原点在图像上定位文本

2 个答案: