Блок рендеринга перед flex-элементами
Я хочу, чтобы красный прямоугольник отображался перед следующими гибкими элементами, но ничто из того, что я пробовал, не приводит к такому порядку.
.box {
font-size: 2.5rem;
width: 100px;
line-height: 100px;
text-align: center;
}
.front .box {
margin: 20px auto;
}
.back {
display: flex;
justify-content: center;
max-width: 600px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 20px 0;
}
.green {
background: green;
}
.yellow {
background: yellow;
}
.red {
background: red;
}<div class = "back">
<div class = "box yellow">
<div class = "box red" style = "position:block; margin-left: 50px; z-index: 99999">2</div></div>
<div class = "box green">2</div>
</div>возможно, я выбрал плохой минимальный пример, потому что он не работал, я уже пробовал этот подход *sadface
поэтому отредактируйте свой вопрос, чтобы включить лучший минимальный пример. На самом деле ваша единственная проблема - пропустить использование свойства position
Наконец-то я нашел проблему: скрытое переполнение свойства было активным, это привело к скрытому элементу, и z-индекс не работал. Спасибо всем за вашу поддержку
Ответы 2
Измените его с position: block на position: absolute. position: block нет, и вы должны использовать правильный атрибут позиционирования, чтобы заставить z-index работать правильно.
.box {
font-size: 2.5rem;
width: 100px;
line-height: 100px;
text-align: center;
}
.front .box {
margin: 20px auto;
}
.back {
display: flex;
justify-content: center;
max-width: 600px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 20px 0;
}
.green {
background: green;
}
.yellow {
background: yellow;
}
.red {
background: red;
}<div class = "back">
<div class = "box yellow">
<div class = "box red" style = "position:absolute; margin-left: 50px; z-index: 99999">2</div></div>
<div class = "box green">2</div>
</div>или relative также
Первое, что я заметил, это position:block, что на самом деле неправильно, position в основном может быть absolute или relative. И я твердо верю, что вы могли бы поместить встроенные стили в селектор .red CSS. Чтобы ответить на ваш вопрос о размещении красного поля перед тем, что вам нужно, это свойство order, которое действует только на гибкие элементы, поэтому, например, если у вас есть
.green{
background: green;
order: -1;
}
Зеленое поле будет левее красного. Обычно в естественном порядке все гибкие элементы имеют нулевой (0) порядок, поэтому присвойте элементу отрицательное значение, иначе оно будет перемещаться дальше влево, пока не дойдет до элемента, который также является гибким элементом и имеет меньшее значение порядка. Я заметил, что у вашего красного поля нет высоты, или я случайно пропустил его, когда печатал его в #happyCoding
нет
position:block