可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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!!! =)

回答1:

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/

回答2:

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);
}