如何将HTML元素定位在固定的div下方

Question

如何将HTML元素定位在固定的div下方

4

我正在尝试将一些HTML元素（特别是h1和p）定位在一个position: fixed的div下面，而不必使用<br>元素，因为如果顶部div的大小调整（高度），那么它将覆盖<h1>和<p>元素。由于这种类型的问题通常需要代码，因此在此提供：

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>

以下是 stylesheet-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

- lobuo

你所提到的是哪个div？倾倒整个页面的HTML和CSS会使定位和解决问题变得更加困难，而不是有帮助，请尝试在http://jsfiddle.net中复制问题或仅发布相关代码。 - T J

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Anjan Talatam · Answer 1

没有边距/填充的CSS解决方案

使用position: sticky和top: 0px来固定您的标题。这样，div将被固定，并从父元素中获取其高度，因此兄弟元素不会与固定的div重叠。

.parent {
  height: 50vh;
  overflow: auto;
  background: yellow;
}

.fixed {
  position: sticky;
  top: 0px;
  background: pink;
}

.content {
  height: 150vh;
}

<div class="parent">
     <div class="fixed">
        Fixed Header
     </div>
     <div class="content">
        <p>content</p>
     </div>
</div>

- crymfox · Answer 2

0

尝试将位置设置为sticky而不是fixed，并给它一个top: 0px;。

- crymfox

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

这并没有回答问题。一旦您拥有足够的声望，您将能够评论任何帖子；相反，提供不需要询问者澄清的答案。- 来自审核 - Ervin Szilagyi

- Patrick Allen · Answer 3

设置需要向下推的 div 的 margin-top。

因此，将所有需要向下推的内容包装在一个带有类名的 div 中。例如：

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

然后在你的CSS中，你可以通过设置容器的margin-top将整个容器向下移动。

.container {
    margin-top: 100px;
}