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 を指定すると、 200px下top: 200pxに移動します...そのプロパティがなければ表示される場所にナビゲーションが表示されます。ウィンドウの上部からヘッダーの高さだけ下に移動します。ナビゲーションも押し下げたい場合は、それに a を追加することもできますが、これにより、他のすべての要素を最初に表示された場所の上から相対的に 200 ピクセルに配置する必要があるという問題が発生します。これはあまり論理的ではありません。 .top: 200px

相対位置

正確に何をしようとしていますか？margin-top: 200px代わりに、ページ上のすべてを 200 ピクセル下に移動するために使用するつもりでしたか?

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

これにより、ヘッダーが 200 ピクセル下に移動し、ナビゲーションの下に配置されます。言われたことを忠実に実行するだけ...

于 2012-04-06T22:19:52.630 に答える
0

は、上から 200 ピクセルの位置に配置されるようになっています<header>。top: 200px;は<nav>オフセットされていないため、 の上部に表示され<body>ます。

于 2012-04-06T22:20:02.413 に答える