1

我有以下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;
}

但navigation_menu 只是出现在pageHeader左上角container。有可能在下面得到它吗？

4

3 回答 3

2

I don't see why you use the absolute positioning. What you are after is actualy default behaviour. I updated your css to this:

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

#pageHeader h1 
{

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

#navigation_menu
{
  width: 169px;
}​

check the fiddle to see the code in action: http://jsfiddle.net/ebgVq/

于 2012-08-21T16:13:04.643 回答
2

You have a few problems, first, get rid of absolute positioning on navigation_menu, it will make it ignore the "pushiness" of the other divs above it.

Second, we have to make pageHeader get pushed. When you make an element positioned absolutely it loses it's ability to make other objects flow around it, including parent elements which want to re-size to their content. Having an absolutely positioned h1 inside of that div makes the div size to 1px x 1px.

于 2012-08-21T16:13:29.983 回答
1

如果您设置一个高度#pageHeader h1，然后使用相同的数量（例如每个 100 像素）设置一个边距顶部，#navigation_menu这应该可以实现您想要的。由于您是绝对定位，因此您将元素从文档流中取出。通过给标题一个高度，您可以通过将其向下移动相同的量来明确地将菜单定位在其下方。这实际上只是一种视觉效果，因为这两个元素都没有流动。

于 2012-08-21T16:14:54.597 回答