html - 引导覆盖

Question

我正在使用 bootstrap 开发我的模板，它有一个全屏 slider ，可以获取特定的特色图像，但是当我将 position: relative 和 position: absolute 放在容器中时，具有 position absolute 的那个不再居中。

这是我的例子: http://jsfiddle.net/vqcf1L5d/

<div class="container-full header">
<div class="container">
    <div class="row">
        <div class="col-md-12">
            header
        </div>
    </div>
</div>

我需要标题覆盖背景并且不显示滚动。

Answer 1

position: absolute 完全按照它所说的去做:它将自己绝对定位到它的父显示上下文。这意味着您的 .header 不会自动居中，因为它将看到左上角，因为它是 0, 0 并向下显示并远离该点.它也在您的 .bg 元素“后面”，因此您甚至看不到它。

不过，您可以改为操纵它的内部 .container(并修复 z-index):

.header {
    position: absolute;
    width: 100%;
    z-index: 100;
}
.header .container {
    width: 150px;
    margin: 0 auto;
    background: #fe634e;
    opacity: 0.8;
    text-align: center;
}

http://jsfiddle.net/userdude/vqcf1L5d/4/