html - Lower z-indexed parent's child upon higher z-indexed element?

Question

Is there a way to manipulate the stacking context this way? I want the text to be on the top of the blue element.

div{
  width: 200px;
  height: 200px;
  position: absolute;
}

#a{
  z-index: 0;
  background-color: red;
  left: 150px;
  top: 150px;
}
#b{
  z-index: 1;
  background-color: blue;
  left: 0;
  top: 0;
}
p{
  z-index: 2;
}

<div id="a">
  <p>verylongtext</p>
</div>
<div id="b"></div>

Answer 1

Yes you can, the trick is to keep the red element with z-index:auto so that p will not belong to its stacking context and can be placed above the blue element.

auto

The box does not establish a new local stacking context. The stack level of the generated box in the current stacking context is the same as its parent's box.^ref

Don't forget to make the p positioned in order to be able to use z-index:

div {
  width: 200px;
  height: 200px;
  position: absolute;
}

#a {
  background-color: red;
  left: 150px;
  top: 150px;
}

#b {
  z-index: 1;
  background-color: blue;
  left: 0;
  top: 0;
}

p {
  z-index: 2;
  position: relative;
}

<div id="a">
  <p>verylongtext</p>
</div>
<div id="b"></div>