Question

我有一个动态div显示一些我想要定位在相对于页面背景的确切位置的信息。例如，我想在一只猫的眼睛上放一个数字9。在“完全”分辨率下，这样可以正常工作，但将边距 - 左边的像素大小，甚至百分比，都会导致其中断。 “眼睛”的代码是这样的：

.catEye {
  position: absolute;
  color: #DCDCDC;
  font-size: 10px;
  font-weight: bold;
  font-family: "helvetica-neue-bold", helvetica, sans-serif;
  width: 25px;
  height: 25px;
  margin-top: 100px;
  margin-left: 68px;
  border: 3px solid #000000;
  border-radius: 100%;
  background-color: #000000;
}

这是一个显示问题的plunkr。在较小的分辨率下，问题最为明显。当处于“完全”分辨率时，“9”应该直接在猫眼上方。

http://plnkr.co/edit/2uqIhBseRLo5A47JVI2F?p=preview

我使用Foundation进行块网格设置，每行5个项目。由于我的图像是一定的大小，如果可能的话，这通常应保持不变。

问题：无论浏览器分辨率如何，有没有办法让“9”始终直接放在眼睛上方？在我的实际工作中，它需要直接定位在角落上，因此移动非常明显。

澄清：在考虑之后，我基本上要求的是相对于图像元素的定位，因为无论它的大小/位置如何，只要放置“9”相对于它，它会起作用。

Answer 1

首先，您可以使用left:和top:属性来定位绝对/相对img（而不是margin-left＆amp; margin-top）

第二次，具体取决于包含img的大小调整方式我将left:和top:属性设置为百分比值。

第三次使用相对定位（相对于静态父级 - 就像你的场景一样）。

将它放在你的CSS中，让我知道它是否是所需的渲染

.imgCat {
   background: url('http://i.imgur.com/qpbY8VC.png') center no-repeat;
   height: 200px;
 }

 li {
   padding: 10px;
   border: 1px solid #000;

 }

 .catEye {
  position: relative;
  color: #DCDCDC;
  font-size: 10px;
  font-weight: bold;
  font-family: "helvetica-neue-bold", helvetica, sans-serif;
  width: 25px;
  height: 25px;
  top: 50%;
  left: 35%;
  border: 3px solid #000000;
  border-radius: 100%;
  background-color: #000000;
}

BTW：实际上猫咪img看起来不是很敏感...

Answer 2

我想你的意思是对猫来说有点background-size:cover，在这种情况下我不认为这是可能的。

目前，relative位置设置在可能大于200px（图像大小）的元素上，并且您在背景上设置了center值，因此它移动了。猫眼总是停留在同一个地方但不是猫的形象。

要解决此问题，您可以将relative元素设置为max-width: 200px;。简化演示如下。

<强> JSFiddle Demo

＆＃13;

.imgCat {
    background: url("http://i.imgur.com/qpbY8VC.png");
    max-width: 200px;
    height: 200px;
    position: relative;
}
.catEye {
    position: absolute;
    left: 75px;
    top: 95px;
    width: 30px;
    height: 30px;
    display: block;
    border: 2px solid orange;
    border-radius: 50%;
}

＆＃13;

<div class="imgCat">
    <span class="catEye"></span>
</div>

＆＃13;

响应地将图像浮动在与背景图像相同的位置上

2 个答案: