Html 使用z索引和位置值对齐div

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

我现在遇到的问题是，包含五个颜色块的

.modal容器

不会显示在两个背景块

.modal left

和

.modal right

的顶部。我尝试过修补所有三个类的z索引值，但都没有用<代码>位置：绝对也不是一个选项，因为这会取消

边距：0自动

对齐。有什么想法吗

请参见此处的演示

首先，重新安排你的div，把50/50放在下面 第二，也是最重要的一点，将此添加到.modal内部 我认为这是比设置头寸/利润率更好的解决方案

 display:block;

编辑： 我真的很激动，对代码进行了彻底的修改。我很抱歉，我无法控制自己，哈哈

---

你的HTML只是需要一些重新安排。放置在另外两个上方的

内部

div将其固定

CSS（更新版）： HTML（少即是多：）：

我对这个问题有点困惑，你实现了什么？@AliGajani我重写了OP以更好地描述问题。所有

div

s都以

block

显示元素开始。此外，他在那里的z索引仍然存在，而且非常不必要。是的，这就是为什么我提到最重要的是重新安排div。感谢您的回答，但是

。model inner

容器仍然没有出现在背景块的顶部：s？当您说“在背景块的顶部”时，你是指垂直位置还是重叠深度？如果你指的是深度，那么我会修正它，使它覆盖在它们上面。@user3149629我只是从根本上更新了它。我把底层做得足够高，这样你就可以看到两者之间的对比，并看到它们是重叠的。只要把两个

height

s放回你以前拥有的

6px

，如果你想让它保持原样。希望这更接近您的期望：）

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

<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>