0

我的 HTML 和 CSS 代码有一个奇怪的问题：

<header>
    <h1>title</h1>
</header>
<nav>
    <a href="">menu 1</a>
    <a href="">menu 1</a>
    <a href="">menu 1</a>
    <a href="">menu 1</a>
</nav> 

header {
  margin: 0 auto;
  position: relative;
  top: 200px;
  width: 200px;
}
header h1 {
  font-size: 24px;
  text-align: center;
}
nav {
  clear: both;
  margin: 0 auto;
  position: relative;
  width: 200px;
}
* {
    border: none;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
    display: block;
}
body, html {
    height: 100%;
}

当它们都相对定位时，为什么会<nav>出现在上面？<header>

请参阅 jsFiddle。

4

3 回答 3

1

不是，您只是将标题移到导航下方。您为其指定了 a top: 200px，它将其向下移动200 像素...您的导航出现在如果该属性不存在时它会出现的位置。它从窗口顶部向下移动了标题的高度。如果你也想向下推导航，你也可以添加一个top: 200px，但这只会导致每个其他元素都需要相对定位到距离它最初出现的顶部 200px 的问题，这不是很合乎逻辑.

相对定位

你到底想做什么？您的意思是改为使用margin-top: 200px，将页面上的所有内容向下移动 200 像素？

于 2012-04-06T22:20:19.137 回答
0 
position: relative; 
top: 200px;

这会将标题向下移动 200 像素，将其放在导航下方。它只是按照你告诉它的去做...

于 2012-04-06T22:19:52.630 回答
0

<header>有top: 200px;所以它将被定位在距离顶部 200 像素处。没有偏移，<nav>所以它应该出现在<body>.

于 2012-04-06T22:20:02.413 回答