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

3条答案

按热度按时间

zkure5ic1#

设置需要按下的div的margin-top。
因此，将需要下推的所有内容都 Package 在一个带有类名的div中。如：

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

然后在你的css中你可以通过设置margin-top来将整个容器向下推

.container {
    margin-top: 100px;
}

赞(0）回复(0）举报 2023-04-13

llycmphe2#

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

jrcvhitl3#

无边距/填充的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>

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

3条答案

无边距/填充的CSS解决方案

相关问题

热门标签

最新问答