0

我有用于重叠图像的 css 和 html 代码，它运行良好，直到我收到客户的投诉。当浏览器缩小时，重叠的文本会移动。我认为我的代码没有问题，研究证明是徒劳的。他说他希望尽快修复它，所以我向我的溢出者寻求帮助！
CSS

      p.contactInfo {
        position: absolute;
        top: 20px;
        right: 475px;
        width: 100%;
        z-index: 10;
    }
    p.contactInfo span {
        color: #D7D7D7;
        font-size:13px;
        letter-spacing: -1px;
        padding: 10px;
        float:right;
    }

HTML

                    <p class="contactInfo"><span>*******
                                                </span></p>

演示 http://jsfiddle.net/baGjv/

4

2 回答 2

1

当您使用诸如 20px 之类的设定数字时，它在屏幕上将是 20px，因为屏幕的大小不同，它会像这样......想象这个“$”是距离左侧 20px 的元素。（我正在使用左侧想象您的模板居中，此时我不能完全确定是否会这样）

large monitor
-----------------
  $


-----------------

small monitor
----------
  $


----------

从左边看是一样的，但如果你乱用 % 值，它会完全不同，并延伸到每台显示器。"$" 给予 20%。如果您的页面的其余部分是静态的（就像大多数是静态的）并且将与您的页面的其余部分保持一致，这将有所帮助。我并不是说left:20%;您需要的确切百分比，您需要更改它。

large monitor
-----------------
    $


-----------------

small monitor
----------
  $


----------
于 2012-10-29T18:46:28.900 回答
1

正如斯宾塞所提到的，问题在于您正在使用right: 475px您的定位。当您的客户将浏览器的大小调整为 -narrower- than475px时，您的项目实际上会从页面的左边缘消失，因为“475px从右侧”的位置现在不再位于浏览器的显示区域内。

我的猜测是您假设该页面将始终至少是600px宽的，即使在最小的可用浏览器上也会有人打开它。如果是这种情况，您可以纠正此问题的一种方法是将body标签设置为有一个min-width（600px或任何你的最小宽度）。通过这样做 - 当窗口变得太窄时，您将在浏览器中创建一个滚动条 - 但不会失去可见性。

但是，解决您的问题的可能更好的方法是避免以这种方式使用绝对定位。绝对定位通常最好相对于相对定位的元素使用。有关我所指内容的清晰解释，请参阅本文。

于 2012-10-29T18:58:52.423 回答