Использование z-index и значений позиции для выравнивания div

Question

Использование z-index и значений позиции для выравнивания div

0

Я пытаюсь создать баннер, который охватывает ширину страницы. Центрированный контейнер размером 1130px в этой области содержит пять блоков цвета на 20% контейнера. За этим контейнером должно быть два divs по 50% каждый - один, содержащий первый образец цвета, а другой содержащий последний, чтобы создать бесшовную палитру, но поддерживать ту же ширину.

Проблема, с которой я .modal-container в данный момент, заключается в том, что .modal-container который содержит пять цветовых блоков, не будет отображаться поверх двух фоновых блоков .modal-left и .modal-right. Я пробовал переделывать значения z-index всех трех классов безрезультатно. position: absolute не является вариантом, так как это отбрасывает margin: 0 auto выравнивание выключено. Есть идеи?

JSFiddle

Эффект, который я ищу

Deryck 31 дек. 2013, в 17:11

Источник

0

Я немного озадачен вопросом, чего вы добиваетесь?
Ali Gajani 31 дек. 2013, в 15:33
0

@AliGajani Я переписал ОП, чтобы лучше детализировать проблему.
user2100672 31 дек. 2013, в 15:41

Теги:

html

css

2 ответа

Ещё вопросы

Я немного озадачен вопросом, чего вы добиваетесь?
@AliGajani Я переписал ОП, чтобы лучше детализировать проблему.

Deryck · Answer 1 · 2013-12-31T13-37-00.000Z

РЕДАКТИРОВАТЬ:

Я просто увлекся и сделал полный пересмотр этого кода. Я ИЗМЕНИЛ, ЧТО Я НЕ МОГУ ПОМОЧЬ МОЛОДЕЖНОМУ LOL

Новый и улучшенный 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>

Оцените ответ, однако контейнер .modal-inner прежнему не отображается поверх фоновых блоков: S?
Когда вы говорите «поверх» фоновых блоков, подразумеваете ли вы вертикальное положение или перекрывающуюся глубину? Если ты имеешь в виду глубину, то я исправлю это так, чтобы она наложилась на них
@ user3149629 Я только что обновил это довольно радикально. Я сделал нижний слой достаточно высоким, чтобы вы могли видеть контраст между ними и видеть, что они перекрываются. Просто установите две height s обратно на 6 6px которые у вас были раньше, если хотите, чтобы все было так, как было. Надеюсь, это ближе к вашим ожиданиям :)

Godinall · Answer 2 · 2013-12-31T12-58-00.000Z

См. Демо здесь http://jsfiddle.net/Godinall/cq27S/3/

Во-первых, переустановите свои divs, чтобы поставить 50/50 под вторым, и, самое главное, добавьте это в.modal-inner. Я считаю, что это лучшее решение, чем установка позиции/полей

 display:block;

Все div начинаются как элементы отображения block . Кроме того, z-индексы, которые он имел там, все еще там и очень ненужны.
Да, именно поэтому я упоминаю самое главное, чтобы переставить div.