将元素固定在滚动页面的顶部

bobbyrne01 发表于 Dev

bobbyrne01

从屏幕截图中可以看到，我有一个<audio>元素保留在滚动页面的顶部。但我也希望在滚动开始之前就可以看到该元素。

如果没有凌乱的javascript删除元素并将其作为子元素附加到滚动上，我将无法正常工作，有什么想法吗？

http://jsfiddle.net/bobbyrne01/772yerga/1/

html ..

<div class="header">
    <audio controls>
        Your browser does not support the audio element.
    </audio>
</div>
<div class="outer">
    <span class="banner">LOGO</span>
    <div class="header">Header</div>
</div>
<div class="content">Content</div>

css ..

.header {
    background-color: #ccc;
    width: 100%;
    position: fixed;
    top: 0;
    bottom: auto;
}
.outer {
    background-color: #fff;
    position: relative;
    height: 100px;
}
.outer .banner {
    font-size: 46px;
}
.outer .header {
    position: absolute;
    bottom: 0;
    z-index: 2;
    top: auto;
}
.content {
    height: 1500px;
    color: blue;
    background-color: #fff;
    margin-top: 100px;
}

滚动之前..

滚动之前

滚动后..

滚动后

延斯·科克（Jens A. Koch）

我z-index将标题更改为99以保留在顶部-内容在下方滚动。并添加top: 50px;到外部-开始较低

演示：http：//jsfiddle.net/v2oyjpkg/

   .header {
        background-color: #ccc;
        width: 100%;
        position: fixed;
        z-index: 99;
    }
    .outer {
        background-color: #fff;
        position: relative;
        height: 100px;
        top: 50px;
    }
    .outer .banner {
        font-size: 46px;
    }
    .outer .header {
        position: absolute;
        bottom: 0;
        z-index: 2;
        top: auto;
    }
    .content {
        height: 1500px;
        color: blue;
        background-color: #fff;
        margin-top: 100px;
    }