Question

我有两个DIV，源代码中最后一个显示在网页的顶部。我希望它们以自然顺序显示。第一个DIV在顶部，第二个DIV在下面。

HTML

<div id="intro">    
  <h2>Gteaay Presents</h2>
  <h1 id="header-bigger">Producer World</h1>   
  <p class="header-smaller">For Producers by producers. A guide for choosing the right music composing software for you!</p>
</div>

<div id="nav">
  <ul>
    <li><a href="index.html">New Products</a></li>
    <li><a href="inspiration/">Inspiration</a></li>
    <li><a href="coupons.html">Coupons</a></li>
  </ul>
</div>

CSS

#intro {
    text-align: center;
    margin: 2em 0em 1em;
    background-image: url('images/gloomy-stripes-blue-lively.jpg');
    padding: 0;
    border-top: medium #0B9696 solid;
    border-bottom: medium #0B9696 solid;
    position: fixed;
    width: 100%;
}
#nav {
    background-color: black;
    height: 3em;
    position: fixed;
    width: 100%;
}

PS发生了 AFTER 我做了position: fixed;之前他们没事。编辑实际上DIV＃2现在在 DIV＃1上显示。

Answer 1

你的DIV＃2现在出现在DIV＃1之上，因为DIV＃2是HTML中声明的最后一个。要解决这个问题，只需添加CSS（DIV＃2）： z-index：-1; 或DIV＃1： z-index：1; < / p>

希望它有所帮助。

Answer 2

这是解决问题的直接解决方案，它是Niet答案的重要部分，并将其纳入我的解决方案。

这是＆＃34;没有工作的原因＆＃34;是因为当你使用position: absolute or position: fixed时，你正在从文档流中删除一个元素。因此，在这种情况下，#intro将从流中移除，#nav移动到其位置。

另外，当您使用position: fixed时，我们还可以使用specific，top等属性添加left位置。

因此，解决方案是根据文档流中的新位置为他们提供特定的固定位置。

e.g。对于 #intro top: 10%或top: 10em;或top: 10px;然后当然会给 #nav 另一个职位那个没有重叠。例如top: 20%或top: 20em或top: 20px

PS我不知道这些价值观是否真的正确或有效，但我只是说明解决方案。

为什么这些固定位置DIV不按文档流程顺序显示？

2 个答案: