Cделать так, чтобы красный оказался позади синего и зеленого?

Question

[PeterPetrov]

<div class="wrap">
        <p>Cделать так, чтобы красный оказался позади синего и зеленого, при этом нельзя менять:</p>
        <ul>
            <li>Нельзя менять HTML-разметку</li>
            <li>Нельзя менять/добавлять z-index к элементам</li>
            <li>Нельзя менять/добавлять позиционирование к элементам</li>
        </ul>
        <div>
            <span class="red">Red</span>
        </div>
        <div>
            <span class="green">Green</span>
        </div>
        <div>
            <span class="blue">Blue</span>
        </div>
    </div>

.red,
.green,
.blue {
  position: absolute;
  font-size: 32px;
}

.red {
  background: red;
  z-index: 1;
}

.green {
  background: green;
}

.blue {
  background: blue;
}

Comments

[Ankhena]

То, что вам никто не говорил о z-index

Answer 1

[RAX7]

div {
  isolation: isolate;
}

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

Answer 2

[Alex_mos]

Пропишите .red position: relative

Comments

[eRKa]

так позиционирование нельзя менять
можно было тогда и так как-то

<div style='position: fixed;'>
   <span class="red">Red</span>
</div>

[Alex_mos]

eRKa, не совсем вас понял))

[eRKa]

Alex_mos, условие задачи

Нельзя менять/добавлять позиционирование к элементам

[Alex_mos]

eRKa, ну так там же добавлено position absolute и z-index добавлен...