Question

我有一个问题，我希望我的标题固定在网页浏览器的顶部，与我制作的导航栏相同。问题是，当我更改Web浏览器的大小时，标题会覆盖内容并移动导航栏。我怎么解决这个问题？

<body>
    <h1>Knox Enterprises Inc.</h1>
    <div class="nav">
        <a href="index.html">Home</a>
        <a href="About.html">About</a>
        <a href="Contact.html">Contact</a>

    </div>
    <div class="adjust">
        <div class="home">
            <div class="home-pictures">
                <img src="http://i64.tinypic.com/14o91c1.jpg" width="300px" height="225px">
                <img src="http://i63.tinypic.com/2rpzh3p.jpg" width="300px" height="225px">
            </div>
            <div class="home-pictures2">
                <img src="http://i68.tinypic.com/rswqoy.jpg" width="300px" height="225px">
                <img src="http://i66.tinypic.com/2lm8bdg.jpg" width="300px" height="225px">
            </div>
            <div class="home-description">
                <ul>
                    <h5>Riveredge, NJ</h5>
                    <h5>Date Completed: June 2014</h5>
                </ul>
        </div>
        <div class="home">
            <div class="home-pictures">
                <img src="home_5.jpg" width="300px" height="225px">
                <img src="home_6.jpg" width="300px" height="225px">
            </div>
            <div class="home-pictures2">
                <img src="home_7.jpg" width="300px" height="225px">
                <img src="home_8.jpg" width="300px" height="225px">
            </div>
            <div class="home-description">
                <ul>
                    <h5>Teaneck, NJ</h5>
                    <h5>Date Completed: March 2015</h5>
                </ul>
        </div>
        <div class="home">
            <div class="home-pictures">
                <img src="home_9.jpg" width="300px" height="225px">
                <img src="home_10.jpg" width="300px" height="225px">
            </div>
            <div class="home-pictures2">
                <img src="home_11.jpg" width="300px" height="225px">
                <img src="home_12.jpg" width="300px" height="225px">
            </div>
            <div class="home-description">
                <ul>
                    <h5>Tenafly, NJ</h5>
                    <h5>Date Completed: August 2016</h5>
                </ul>
        </div>
    </div>  
</body>

我的.css代码是

    html, body {
        margin: 0;
        padding: 0;
        background-image:url("backround.jpg");
        background-repeat: repeat-y;
    }
    /*Knox Header*/
    h1 {
        position: fixed;
        top: -40px;
        width: 100%;
        font-family: Georgia;
        color: white;
        text-shadow: 4px 4px black;
        background-image: url("header.jpg");
        font-size: 60px;
        text-align: center;
        text-transform: uppercase;
        border-bottom: 5px solid orange;
        border-top: 5px solid orange;
    }
    /*Nav Menu/Home Page*/
    .nav {
        position:fixed;
        padding-top:78px;
        background-image:#606060;
        overflow: hidden;
        }
    .nav a {
        font-family: Helvetica;
        background-color:black;
        float: left;
        color: #f2f2f2;
        text-align: center;
        padding: 10px 12px;
        text-decoration: none;
        font-size: 12px;
        border-right: 2px solid orange;
        border-bottom: 2px solid orange;
        border-top: 2px solid orange;
        letter-spacing: 2px;
        }
    .nav a:hover {
        background-color: #ddd;
        color: black;
        }
    .home {
        text-align:center;
        padding-top: 10px;
        padding-bottom: 10px;
        }
    .home-pictures, .home-pictures2{
        height:auto;
        width:auto;
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
    }
    .home img {
        border: 1px solid white;
        }
    .home-description {
        line-height: 0px;
        color: white;
        letter-spacing: 2px;
        font-family: Helvetica;
        font-size: 18px;
        }

Answer 1

将两个元素放在容器中并固定此容器，而不是使用带有position: fixed的两个元素。它们都被置于流量之外，因此它们不会相互影响（因此当内容的宽度不足以使其必须断开线时，导航栏将与h1重叠）

Answer 2

我首先将标题和导航栏包装在其自己的标记中，例如：

import QtQuick 2.0
import QtQuick.Particles 2.0

Rectangle {
    id: bg
    width: 360
    height: 360
    color: "black"

    ParticleSystem {
        id: particleSys
    }

    Emitter{
        id: particles
        anchors.centerIn: parent
        height: 14; width: 16
        system: particleSys
        emitRate: 80
        lifeSpan: 4000
        lifeSpanVariation: 500
        maximumEmitted: 1000
        size: 5
        endSize: 40           

        velocity: TargetDirection{     
            targetX: 0; targetY: 0
            targetVariation: 360
            magnitude: 250
        }

        Timer{
              interval: 500; running: true; repeat: true
              onTriggered: particles.burst(particles.emitRate)
        }
    }

    ImageParticle{
        source: "images/blueBlip.png"      //My image
        system: particleSys
    }
}

然后，您只需要担心一个固定位置元素。

从那里，你有一些选择。

您可以使用javascript查看窗口调整大小并相应地调整margin-top。
您可以确定标题在常见浏览器尺寸下的确切高度，并使用media queries调整其余部分。

编辑：

实际上，你知道什么会更容易吗？

<header class='header-fixed'>
  <h1>Knox Enterprises Inc.</h1>
  <div class="nav">
    <a href="index.html">Home</a>
    <a href="About.html">About</a>
    <a href="Contact.html">Contact</a>
  </div>
</header>

如果你能确切地知道你的标题有多高，那么你可以使用calc（）来设置其余内容的高度，并实际上将div作为滚动的部分。那时，你不需要固定的定位。

页面大小更改HTML时标题重叠内容

2 个答案: