如何定位一个html元素在一个固定的div [英] How to position a html element under a fixed div
问题描述
我试图将一些html元素（特别是h1和p）放置在 position：fixed div下，而不必使用< br> ; 元素，因为如果顶部div被调整大小（高度），则它将与< h1> 和< p> 元素。由于此类型的问题通常需要代码，因此这里是：
I am trying to position some html elements (particularly h1 and p) under a position: fixed div without having to use the <br> element, because if the top div gets resized (in height), then it will overlap the <h1> and <p> element. Since this type of question usually needs code, here it is:
index.html文件：
index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Home | lobuo</title>
<link type="text/css" rel="stylesheet" href="stylesheet-main.css">
</head>
<body>
<div id="menuBack">
<ul id="menuBar">
<li class="menuItem"><a href="index.html">Home</a></li>
<li class="menuItem" class="subMenuHolder">
<a>Projects ▾</a>
<ul class="subMenu">
<li><a href="pages/minecraft.html">Minecraft projects</a></li>
<li><a href="pages/mods.html">Minecraft mods/plugins</a></li>
<li><a href="pages/webapps.html">Web apps</a></li>
</ul>
</li>
</ul>
<a href="https://github.com/lobuo">
<img class="socialIcon" src="img/Octocat.png" />
</a>
<a href="https://www.youtube.com/LobuoDev">
<img class="socialIcon" src="img/YouTube-icon-full_color.png" />
</a>
</div>
<br><br><br><br>
<div>
<h1>Welcome to my website!</h1>
<p>This is my website. I know how to code a little HTML and JavaScript. I do not have many projects here yet, but there will be some soon. The website is currently under construction, so don't be too dissapointed if a link doesnt work, or a page doesnt exist.</p>
<p>If you find something wrong with the website, you can report it as a bug <a>here.</a></p>
</div>
</body>
</html>
这里是stylesheet-main.css文件：
and here is the stylesheet-main.css file:
body {
margin: 0px;
}
#menuBack {
height: auto;
width: 100%;
background-color: rgba(9, 52, 100, 0.92);
position: fixed;
}
.menuItem {
color: #e5822e;
display: inline-block;
font-size: 25px;
font-family: verdana, sans-serif;
padding-left: 15px;
padding-right: 15px;
}
.menuItem:hover {
color: #ab6122;
background-color: rgba(48, 95, 147, 0.92);
}
.socialIcon {
height: 30px;
display: inline-block;
vertical-align: middle;
float: right;
padding: 20px;
}
a {
text-decoration: none;
color: #f44d4d;
}
h1 {
font-family: sans-serif;
text-align: center;
}
p {
font-family: "andale mono", "courier new", courier, serif;
padding: 10px;
}
/* MenuBar dropdown menu came from here: http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery/ */
#menuBar {
float: left;
}
#menuBar > li {
float: left;
}
#menuBar li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#menuBar ul {
position: absolute;
list-style: none;
left: 7.1em;
display: none;
}
#menuBar ul li a {
width: auto;
background-color: rgba(9, 52, 100, 0.92);
}
#menuBar ul li a:hover {
background-color: rgba(48, 95, 147, 0.92);
}
#menuBar li:hover ul {
display: block;
}
提前感谢：D
推荐答案
设置 div 的 margin-top
因此，需要在一个 div 中包含需要下载的所有内容。喜欢：
So wrap everything that needs to be pushed down in a div with a class name. Like:
<div class="container">
//everything that needs to be pushed down goes here
</div>
然后在您的css中，您可以通过设置margin-top
Then in your css you can push that whole container down by setting it's margin-top
.container {
margin-top: 100px;
}
这篇关于如何定位一个html元素在一个固定的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
