我正在尝试创建一个非常简单的网站。 我的<nav>标签内有一个纯CSS下拉菜单。 在导航栏下方,我有<header>标签。
由于我已将<nav>标记设置为position: absolute我的标题自然向上移动,因此我应用margin: 50px 0 0 0将其向下移动。 然而,看起来我的导航器随之向下移动,并且没有从导航器中清除。
我根本就不明白。 首先,nav标签位于标题上方,并使用position: absolute 。
这是我的代码
body { font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: black; color: black; width: 800px; margin: auto; } nav { background-color: #FFF; color: #000; position: absolute; width: 800px; } header { color: white; margin: 50px 0 0 0; } main { width: 60%; background-color: #FFF; color: #000; } aside { width: 30%; background-color: #FFF; float: right; }<nav> <ul> <li><a href='index.php'>Home</a></li> <li><s>About</s></li> <li><s>Plugins</s></li> <li>Guest <ul> <li><s>Login</s></li> </li> </ul> </nav> <header> <h2>Welcome</h2> </header> <main> <p>Main Content</p> </main> <aside> <p>Side bar</p> </aside>I am trying to create a very simple site. I have a pure CSS Dropdown menu inside my <nav> tags. Below the nav, I have my <header> tags.
Since I've set my <nav> tags to be position: absolute my header have naturally moved up, so I apply margin: 50px 0 0 0 to move it back down. However it appears that my nav moves down with it, and does not clear off from the nav.
I simply don't understand. Firstly, the nav tag is above the header, and is using position: absolute.
Here's my code
body { font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: black; color: black; width: 800px; margin: auto; } nav { background-color: #FFF; color: #000; position: absolute; width: 800px; } header { color: white; margin: 50px 0 0 0; } main { width: 60%; background-color: #FFF; color: #000; } aside { width: 30%; background-color: #FFF; float: right; }<nav> <ul> <li><a href='index.php'>Home</a></li> <li><s>About</s></li> <li><s>Plugins</s></li> <li>Guest <ul> <li><s>Login</s></li> </li> </ul> </nav> <header> <h2>Welcome</h2> </header> <main> <p>Main Content</p> </main> <aside> <p>Side bar</p> </aside>最满意答案
从它的外观来看,你的nav元素不需要绝对定位。 如果你想把它固定在顶部,你甚至可以尝试使用position: fixed; 。
我真的认为你需要做的是删除position: absolute; ,但如果由于某种原因你绝对需要它,请添加
top: 0; left: 0; right: 0;到nav元素的CSS。
此外,您应该尝试使用容器,而不是在您的body元素上设置宽度,这会使您现在的方式变得不那么灵活。
.container { margin: auto; position: relative; width: 800px; }(虽然有点奇怪的宽度,但为什么800px?)
如果你不能这样做,并且你希望导航仍然是身体的宽度,添加position: relative; 对身体。
From the looks of it, your nav element doesn't need to be positioned absolutely. If you want it fixed at the top you could even try use position: fixed;.
What I really think you need to do is remove the position: absolute;, but if you absolutely need it that way for some reason, add
top: 0; left: 0; right: 0;To the nav element's CSS.
Also, you should try to use a container, rather than setting the width on your body element, it makes things a lot less flexible the way you're doing it now.
.container { margin: auto; position: relative; width: 800px; }(Bit of a strange width to be setting anyway though, why 800px?)
If you can't do that, and you want the nav to still be the width of the body, add position: relative; to the body.
更多推荐
发布评论