Question

我试图将一些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

Answer 1

设置您需要按下的margin-top的{{1}}。

因此，需要在具有类名的div中下载所有需要的内容。像：

div

然后在你的CSS中，你可以通过设置它的边缘顶部来推动整个容器

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

如何在固定的div下定位html元素

1 个答案: