Header disappearing when position is fixed

i've got an issue that I've been googling for hours trying to resolve without success – I'm going nuts.

When I set position:fixed to my header, it disappears, and I cannot figure out why. Any help would be appreciated. Here's my css:

------- HTML ---------

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>

    <div id="header">

    <div id="header-title">
    TITLE
    </div>

    <div id="header-navigation">
    MENU
    </div>
    </div>

    <div class="content-container">

    <div class="post">
    <img src="1.jpeg">

    <h2 class="post">
    Hello
    </h2>

    </div>

    <div class="post">
    <img src="1.jpeg">

    <h2 class="post">
    Hello
    </h2>
    </div>

    <div class="post">
    <img src="1.jpeg">

    <h2 class="post">
    Hello
    </h2>
    </div>

    </div>

    </body>
    </html>

-------- CSS ----------

    html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    }

    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

    #header {
    position: fixed;
    }

    #header-title {
    float: left;
    }

    #header-navigation {
    float: right;
    }

    .content-container {
    width: 100%;
    columns: 3;
    -webkit-columns: 3; /* Safari and Chrome */
    -moz-columns: 3; /* Firefox */
    column-gap:0px;
    -moz-column-gap:0px;
    -webkit-column-gap:0px;
    column-fill: balance|auto;
    }

    .post {
    display: block;
    position: relative;
    }

    .post img {
    width: 100%;
    height: auto;
    display: block;
    }

    .post h2 {
    position: absolute;
    display: none;
    top: 50%;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    color: #000;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
    }

    .post:hover img {
    opacity: 0.15;
    }

    .post:hover h2 {
    display: block;

    }

THANKS IN ADVANCE!!! =)

标签： position fixed relative absolute

2条回答

你好瞎i

2楼-- · 2019-07-14 00:05

Setting a DOM node as fixed removes it from the normal document flow.

You should use the following CSS to set the header to a fixed height and use that same height as the padding for the content-container (because it won't push the content-container down because it has been removed from normal document flow). Notice both have 20px in this example.

#header {
    position: fixed;
    background-color: red;
    width: 100%;
    height: 20px;
    z-index: 10;
}

.content-container {
    padding-top: 20px;
}

See the jsfiddle for a complete, working example: http://jsfiddle.net/x8vbs/

0人赞添加讨论(0) 举报

该账号已被封号

3楼-- · 2019-07-14 00:16

Try adding the transform method translateZ(0); , ofcourse this does not fix the issue accross 100% of the browsers, but I've founded it to be 100% effective.

#header {
    position: fixed;
    background-color: red;
    width: 100%;
    height: 20px;
    z-index: 10;
    top: 0;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

0人赞添加讨论(0) 举报

Header disappearing when position is fixed

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间