Question

我有以下html：

<div id="container">
    <div id="pageHeader">
      <h1><span>Page Title</span></h1>
    </div>

    <div id="navigation_menu">
      <ul>
        <li id="treeslink"><a href="#">Trees</a></li>
        <li id="gardenslink"><a href="#">Gardens</a></li>
        <li id="portlink"><a href="#">Portfolio</a></li>
      </ul>
    </div> 
  </div>

我想将navigation_menu直接放在pageHeader。

之下

所以我在.css中有这个：

#container {width:870px; margin:0 auto;position:relative;}

#pageHeader h1 
{
  position:absolute;
  width:870px;  
  margin-top:0;
  font:74px "F25_TypewriterCondensed";
  letter-spacing:-2px;
}

#navigation_menu
{
  position:absolute;
  width: 169px;
}

但导航菜单只显示在pageHeader左上角的container上方。是不是可以把它放在下面？

Answer 1

我不明白你为什么使用绝对定位。你所追求的是实际的默认行为。我将你的css更新为：

#container 
{
   width:870px; 
   margin:0 auto;
}

#pageHeader h1 
{

  margin-top:0;
  font:74px "F25_TypewriterCondensed";
  letter-spacing:-2px;
}

#navigation_menu
{
  width: 169px;
}

检查小提琴以查看实际操作中的代码：http://jsfiddle.net/ebgVq/

Answer 2

你有一些问题，首先，摆脱navigation_menu上的绝对定位，它会忽略其上方其他div的“咄咄逼人”。

其次，我们必须让pageHeader得到推动。当你完全定位一个元素时，它就会失去使其他对象在它周围流动的能力，包括想要重新调整其内容大小的父元素。在h1内置一个绝对定位的div会使div大小为1px x 1px。

Answer 3

如果您在#pageHeader h1上设置了一个高度，然后使用相同的金额（例如每个100px）在#navigation_menu上设置一个margin-top，那么这应该可以达到您想要的效果。由于您绝对定位，因此您可以从文档流中取出元素。通过为标题指定高度，您可以通过将其向下撞击相同的数量来明确定位其下方的菜单。它只是一种视觉效果，因为两种元素都不在流动之中。

如何将div直接放在它的兄弟下面（不使用固定坐标）？

3 个答案: