Question

我有css＆amp;我做的重叠图像的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/

Answer 1

当你使用20px这样的设定数字时，它会在屏幕上显示为20px，因为屏幕尺寸不同会有所不同......想象一下这个“$”是距离左边20px的元素。（我正在使用左想象你的模板是居中的，如果有的话，我现在还不能完全确定）

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


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

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


----------

从左边开始是相同的，但是如果你弄乱％值，它将完全不同并延伸到每个监视器。给出20％的“$”。如果页面的其余部分是静态的（与大多数页面一样），这将有所帮助，并将与页面的其余部分保持一致。我并不是说left:20%;是您需要的确切百分比，您需要更改它。

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


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

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


----------

Answer 2

如Spencer所述，问题在于您使用right: 475px作为定位。当您的客户将其浏览器调整为比475px更长时间时，您的商品实际上会从页面的左边缘消失，因为“475px从右侧”的位置现在不再位于浏览器的显示区域。

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

然而，解决问题的可能更好的方法是以这种方式避免使用绝对定位。绝对定位通常最佳地使用 relative 到相对定位的元素。有关我所指的内容的明确解释，请参阅this article。

停止文本移动HTML

2 个答案: