如何在一个固定格下定位html元素

我想在position: fixed div下放置一些html元素（特别是h1和p）而不必使用<br>元素，因为如果顶部div被调整大小（高度），那么它将重叠<h1>和<p>元素。由于这种类型的问题通常需要的代码，那就是：如何在一个固定格下定位html元素

index.html文件：

<!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>

，这里是样式表-的main.css文件：

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

来源

2014-03-30 lobuo

哪一个是div你提推送整个集装箱？倾全HTML和CSS的网页就更难找到并解决问题不是帮助，请尝试复制的问题http://jsfiddle.net或交的只是相关的代码.. –

设置您需要的div的margin-top被按下。

所以包装，需要在div被向下推类名的一切。像：

<div class="container"> 
    //everything that needs to be pushed down goes here 
</div>

然后在你的CSS您可以向下通过设置它的上边距

.container { 
    margin-top: 100px; 
}

来源

2014-03-30 07:38:24

感谢试图帮助，但是，使页面看起来很时髦的... [链接]（https://www.dropbox.com/s/0wzs00e92s6vei1/Screenshot%202014-03-29%2021.57.49.png） – lobuo

那是因为你把菜单/ div中的导航。拿出来放在它上面。 –

喔...还有，你需要设置'顶：0像素;'在固定的导航。我为你写了一个例子。 ** [这里]（http://jsfiddle.net/kQwhj/）** –

如何在一个固定格下定位html元素

回答

相关问题