使用z-index和位置值来对齐div

Question

我正在尝试创建一个横跨页面宽度的横幅。在该区域内测量1130px的中心容器在容器的20％处容纳五块颜色。在这个容器后面应该是两个div，每个50％ - 一个包含第一个颜色样本，另一个包含最后一个创建无缝调色板但保持相同的宽度。

我现在遇到的问题是，保存五个颜色块的.modal-container不会显示在两个背景块.modal-left和.modal-right之上。我试图修改所有三个类的z-index值无济于事。 position: absolute也不是一个选项，因为这会导致margin: 0 auto对齐。有什么想法吗？

JSFiddle

The effect I'm looking for

Answer 1

编辑：

我刚刚被带走并对该代码进行了全面检修。我很抱歉，我不能帮助自己大笑

New and improved ya dig.

---

您的HTML只需要重新安排。位于其他两个上方的inner div将其固定。

CSS（更新）：

.modal {
    background-image: -webkit-linear-gradient(right, #3e454c 50%, #ff7f66 50%);
    background-image: -moz-linear-gradient(right, #3e454c 50%, #ff7f66 50%);
    background-image: -ms-linear-gradient(right, #3e454c 50%, #ff7f66 50%);
    background-image: -o-linear-gradient(right, #3e454c 50%, #ff7f66 50%);
    background-image: linear-gradient(to left, #3e454c 50%, #ff7f66 50%);
    background-size: cover;
    background-attachment: fixed;
    background-position: left top;
    background-repeat: no-repeat;
    height: 54px;
    width: 100%;
    max-width: 1130px;
}
.modal-inner {
    position: relative;
    max-width: 1130px;
}
.modal-block {
    float: left;
    width: 20%;
    height: 27px;
}
.una {
    background: #3e454c;
    background: rgba(62, 69, 76, .5);
}
.dos {
    background: #2185c5;
    background: rgba(33, 133, 197, .5);
}
.tres {
    background: #7ecefd;
    background: rgba(126, 206, 253, .5);
}
.cuatro {
    background: #fff6e5;
    background: rgba(255, 246, 229, .5);
}
.cinco {
    background: #ff7f66;
    background: rgba(255, 127, 102, .5);
}

HTML（少即是多:) :)：

<div class="modal">
    <div class="modal-inner">
        <div class="modal-block una"></div>
        <div class="modal-block dos"></div>
        <div class="modal-block tres"></div>
        <div class="modal-block cuatro"></div>
        <div class="modal-block cinco"></div>
    </div>
</div>

Answer 2

在此处查看演示http://jsfiddle.net/Godinall/cq27S/3/

首先，重新安排你的div以将50/50放在下面 其次，最重要的是，将其添加到.modal-inner 我认为这是比设置位置/边距更好的解决方案

 display:block;