Question

<header>
    <div class="row">
        <div class="col-md-6 name">Aayushi </div>
        <div class="col-md-2 about">About</div>
        <div class="col-md-2 experience">Experience</div>
        <div class="col-md-2 contact">Contact</div>
    </div>
</header>
<div class="col-md-12 col-xs-12 row div2">
    <div class="col-md-8 col-xs-8">

    </div>
    <div class="col-md-4 col-xs-4 image-div">
    <img src="https://www.w3schools.com/css/trolltunga.jpg" class="image col-md-12 col-xs-12">
    </div>
</div>

<header>
    <div class="row">
        <div class="col-md-6 name">Aayushi </div>
        <div class="col-md-2 about">About</div>
        <div class="col-md-2 experience">Experience</div>
        <div class="col-md-2 contact">Contact</div>
    </div>
</header>
<div class="col-md-12 col-xs-12 row div2">
    <div class="col-md-8 col-xs-8">

    </div>
    <div class="col-md-4 col-xs-4 image-div">
    <img src="image.jpg" class="image col-md-12 col-xs-12">
    </div>
</div>

header{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index:10;
    width:100%;
    background-color: #607D8B; 
    height:10vh;
    color:#8BC34A; 
    font-size:200%;
    padding-top: 0.3em;

}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

.image{
    width: 100%;
}

.div2{
    margin-top:14%;
}

我正在实现一个基本标题，其位置我指定为position：absolute然后它重叠在它下面的内容。

为什么会这样？即使我将类navbar-fixed-top添加到我的标题中，它也会重叠下面的内容！

如果我想修复标题，那该怎么办？ codepen链接是https://codepen.io/asinha/pen/MJZooj

seconds

Answer 1

这是因为当您为元素提供fixed的位置时，该元素将相对于浏览器窗口定位;当你给一个元素一个absolute的位置时，那个元素就会相对于最近的父元素而不是position: static定位（我相信它是＆＃34;默认的＆＃34;元素的位置值大多数浏览器）。

https://www.w3schools.com/cssref/pr_class_position.asp

很难确切地知道为什么没有演示可以使用，但我假设问题是因为标题的内容/孩子最终溢出标题的高度。即使您已将标题定为10vh的固定高度，如果您调整浏览器大小以使标题width变小，最终height: 10vh可能不会高到足以包含所有标题的内容，因此它溢出。要对此进行测试并查明内容是否溢出标题，您可以将标题应用于标题并将其弄乱。

一个非常简单的解决方案，以便您的标题与网站内容不重叠，内容是通过应用header { z-index: -1; }或.div2 { z-index: 1 }将标题移到z-index的较低位置。但我想这并不是你想要的。

在您的codepen中，您的标头重叠div2的原因是 - 正如我已经说过的那样 - height的{{1}}正在增加以适应其由于您尚未将header应用于height，因此内容泛滥。

您可以执行的操作是将固定的header应用于height，并将这些属性和值应用于header：div2和position: absolute。

https://codepen.io/tOkyO1/pen/EXgOBp?editors=1100

当您向下滚动页面时，图像将再次被标题隐藏;但除非你修复了图像，否则你无法避免这种情况......如果你不关心图像是否漂浮在标题之上，那么请执行我上面谈到的z-index事。

如果这些都不是您想要做的。对不起，但是在你弄清楚自己想做什么之前，我无法帮助你。我已经浪费了足够的时间来弄清楚你想做什么。

Answer 2

这是因为绝对或固定的内容不会影响页面上的任何其他元素。

将你的css切换到这个，它看起来更好IMO

header{
    width:100%;
    background-color: #607D8B; 
    color:#8BC34A; 
    font-size:200%;
    padding: 15px;
    postion: fixed;
    z-index: 999;

}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

.image{
    width: 100%;
}

.div2{
    margin-top:14%;
}

我删除了标题高度和位置属性。无需修改页面顶部的内容，默认情况下已经存在。而height属性导致它不能完全包含其内容。如果你要给它一个高度，在这种情况下使用min-height可能更好，所以它可以用它的内容进行拉伸。

可以使用line-height提升或降低内部文字，但我只是使用padding来更轻松地将其居中。

Answer 3

我认为您遇到的“重叠”问题来自标题中包含的链接，由于您已为标题指定了height 10vh，因此会重叠。 vh是相对于视口高度的单位，并根据屏幕进行调整。

只需删除height声明即可解决此问题，并允许标题自动扩展到其中包含的元素的高度。

我创建了一个展示此here的Bootply。

或者，您可以缩小字体的大小，其font-size为200%。

希望这有帮助！：）

HTML5标头标签与其下方的内容重叠

3 个答案: