响应式图片位于图像上方

Question

我已经建立了一个 jsfiddle 来展示我所尝试做的事情：

http://jsfiddle.net/MgcDU/3936/

#counter {
    position: relative;
}
#over {
    position:absolute;
    left:33%;
    top:43%;
}

猫的图像是我的背景图像，随着浏览器的大小而调整大小。

球形图像绝对定位在猫上方。我该如何让球形图像调整大小并保持在默认位置？

- AltDan

---

请尝试使用 position:fixed; 替代。 - Andrew

Answer 1

将您的#counter div设置为display: inline;，或添加一个具有display: inline;属性的包装器，并将 #over的max-width设置为例如10%（DEMO）：

#counter {
    position: relative;
    display: inline;
}
#over {
    position:absolute;
    left:33%;
    top:43%;
    max-width: 10%;
}

- Marcel Gwerder

---

我想表达的就是这个意思。你需要将绝对定位的元素相对于一个与猫图片大小相同的元素进行定位。这里是左侧位置微调后的代码：http://jsfiddle.net/isherwood/MgcDU/3939/ - isherwood

从玩弄小提琴来看，主要区别似乎是添加： url('http://getbootstrap.com/2.3.2/assets/css/bootstrap.css'); url('http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css'); 将display:inline和max-width添加到第一个小提琴中并没有什么区别。 - Rory G