Question

我有一个问题，我一直在谷歌搜索几个小时试图解决没有成功 - 我疯了。

当我设置位置：固定到我的标题时，它会消失，我无法弄清楚原因。任何帮助，将不胜感激。这是我的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;

    }

感谢提前!!! =）

Answer 1

将DOM节点设置为已修复将其从正常文档流中删除。

您应该使用以下CSS将标头设置为固定高度，并使用与内容容器的填充相同的高度（因为它不会将内容容器向下推，因为它已从正常文档中删除流）。注意在这个例子中两者都有20px。

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

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

有关完整的工作示例，请参阅jsfiddle：http://jsfiddle.net/x8vbs/

Answer 2

尝试添加转换方法translateZ（0）;当然，这并不能解决100％浏览器中存在的问题，但我认为这是100％有效的。

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

当位置固定时，标题消失

2 个答案: