Question

因此，一个自由职业者客户希望为她的网站提供一个类似于我的github叠加功能区。她发送的功能区比github大一些，所以当我调整浏览器大小时，它会弄乱一些现有的div。

下面是我使用的代码:(严重依赖twitter boostrap）

   <body>
<a href="#"><img style="position: absolute; top: 0; left: 0; border: 0;" src="ribbon.png" alt="hello"></a>
<div class="navbar">
    <div class="container">
      <ul class="nav">
        <li><a href="services.html">SERVICES</a></li>
        <li><a href="#contact">CONTACT / QUOTE</a></li>
      </ul>
    </div>
</div>

<div class="container">
  <div class="box">

以及它的外观： http://i.imgur.com/OB1nD.png （＆＃39;框＆＃39;是有问题的容器盒）

你可以告诉我，如果我调整浏览器的大小，那么“嘿嘿家伙们......”＃。文本在功能区下移动。只是想知道你们是否可以提供任何优雅的方法来处理这个问题。谢谢！

编辑：刚才意识到，这是因为我在容器外调用功能区吗？

Answer 1

您的功能区图像绝对定位，但很可能您的div.container和内部元素不是。尝试添加一个位置：绝对位置和显式顶部+左侧（基于功能区图像的大小）以正确定位它，与浏览器大小调整无关。

网站功能区覆盖+调整浏览器大小

1 个答案: