Question

我的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>出现在{{1}}之上？

See the jsFiddle.

Answer 1

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

Relative positioning

你到底想要做什么？您的意思是使用margin-top: 200px代替将页面上的所有内容向下移动200px吗？

Answer 2

position: relative; 
top: 200px;

这会将标题向下移动200px，将其置于导航栏下。它只是完全按照你所说的去做......

Answer 3

<header>有top: 200px;所以它将位于距离顶部200像素的位置。在<nav>的顶部，<body>没有偏移，因此应该显示。

为什么相对定位会改变我页面的顺序？

3 个答案: