Как расположить эти div друг над другом
У меня есть 3 div, которые содержат только цвет фона, и я хочу сделать что-то похожее на логотип Google Chrome.
Это всего лишь часть кода, помимо всего этого есть еще контент, но в основном это фон для страницы.
Прямо сейчас зеленый находится поверх красного, и это нормально. Но желтый находится ниже красного и зеленого, и он должен быть на ВЕРХЕ зеленого и ПОД красным div. Что-то вроде запутанных div.
Есть ли способ поместить желтый div поверх зеленого и под красным div, чтобы он больше походил на логотип Google Chrome.
Это лучшее, что я могу объяснить, лол, я знаю, что сложно понять, что я делаю.
Вот код (нажмите, чтобы открыть код)
.container {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.red {
position: absolute;
left: 30%;
width: 100%;
height: 150vh;
transform: rotate(58deg);
background-color: #b71724;
opacity: 1;
transition: all 0.7s ease-in;
}
.green {
position: absolute;
right: 20%;
width: 110%;
height: 150vh;
transform: rotate(-58deg);
background-color: #2c4b2b;
opacity: 1;
transition: all 0.7s ease-in;
}
.yellow {
position: absolute;
top: 58%;
width: 100%;
height: 100vh;
background-color: #d1aa3b;
z-index: -1;
opacity: 1;
transition: all 0.7s ease-in;
}<div class = "container">
<div class = "bg-div red"></div>
<div class = "bg-div green"></div>
<div class = "bg-div yellow"></div>
</div>@isherwood я отредактировал вопрос и добавил изображение, чтобы представить то, что я ищу
Можно ли иметь два div для желтого цвета; один для левой половины и один для правой половины? Отрегулируйте z-индекс каждого, чтобы он проходил над/под соседним div и позволял им встречаться посередине.
Ответы 4
Назначьте разные z-index :
.red {
z-index : 3;
}
.yellow {
z-index : 2;
}
.green {
z-index : 1;
}
Если вы поместите один и тот же z-индекс для двух div, то их место в HTML-коде будет определять их позицию (последние в теле впереди)
я пытался, но тогда зеленый был бы в том же положении, что и желтый прямо сейчас, который был бы внизу всех div. Чего я хочу добиться, так это того, чтобы каждый div находился поверх одного div и под другим div.
Вам нужно применить свое решение к исходному коду, чтобы продемонстрировать, что оно работает.
Вы можете использовать z-индекс для красного и зеленого, как вы использовали для желтого, изменив z-индекс желтого на 0 и определив z-индекс зеленого на -1 и z-индекс красного на 1.
я пытался, но все же это заставило бы один div идти поверх всего, а один - снизу всего..
Нет. Это возможно с чем-то вроде бумаги, но z-индекс больше похож на стопку тарелок. Это было бы похоже на укладку тарелок так, чтобы нижняя была также поверх верхней. Не произойдет.
Единственный способ «обмануть» решение — это скопировать нижний элемент (желтый), поднять его до самого верха и каким-то образом замаскировать так, чтобы он был выглядит, как будто он и под красным, и над зеленым. Я не уверен, что вы пытаетесь сделать в своем реальном приложении, но я бы рекомендовал просто добиться эффекта с изображением.
Но невозможно заставить работать только эти три блока так, как вы описываете.
Я действительно думал, что это возможно как-то. Это казалось простым, когда я понял эту идею, но теперь я вижу, что нет никакого способа достичь этого. Большое спасибо!
@freya21 нет проблем! Я столкнулся с тем же самым с помощью ProcessingJS давным-давно, я помню, что чувствовал, что решение было так близко.
Одним из решений вашей проблемы является использование дополнительного div, чтобы закрыть позицию последнего div, я покажу вам пример кода:
.contain {
position: relative;
padding: 20px;
}
div {
width: 100px;
height: 400px;
}
.red {
position: absolute;
background: red;
left: 220px;
transform: rotate(-33deg);
z-index: 2;
}
.yellow {
position: absolute;
background: yellow;
transform: rotate(90deg);
top: 140px;
left: 160px;
z-index: 1;
}
.greenOut {
height: 200px;
z-index: 3;
background: green;
transform: rotate(34deg);
position: absolute;
left: 138px;
top: 34px;
}
.green {
position: absolute;
background: green;
transform: rotate(34deg);
left: 80px;
} <div class = "contain">
<div class = "red"></div>
<div class = "yellow"></div>
<div class = "green"></div>
<div class = "greenOut"></div>
</div>
То, что вы спрашиваете, не имеет смысла. если зеленый над красный, как желтый может быть над зеленым и под красным? Попробуйте сделать это с тремя игральными картами. Вам нужна другая стратегия.