Why is the background print first and then the text when the margin with negative values is used?

Question

There was a lot of talk about what was first printed within the stacking context and a lot of the answers were based on setting the order from the specification:

1. the background and borders of the element forming the stacking context.
2. the child stacking contexts with negative stack levels (most negative first).
3. the in-flow, non-inline-level, non-positioned descendants.
4. the non-positioned floats.
5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
7. the child stacking contexts with positive stack levels (least positive first).

Following that order, it is completely clear to me why the backgrounds are printed the way they are printed, however, it is not clear to me why the text within the elements with the given backgrounds does not follow that order? If that order is already being followed, shouldn't the text within the elements be printed according to it?

Example: http://jsfiddle.net/4qj3trhm/14/

According to the specification, the background of the element that creates the stacking context is printed first (# 1), then the background of non-inline elements (# 3) and finally, the inline elements background (# 5). That is indeed true. On the other hand, when it comes to the text within these elements, it does not follow the given order at all. If we assume that "container text" is also considered as an inline element, the text of the non-inline element should be printed first (in this case it is "Some text inside div"), and only then the text of the container element and span element. However, the order is completely different, why is this happening?

HTML:

<div class="container">
Some text inside container
<span>
  Some text inside span
</span>
<div>
  Some text inside div
</div>
</div>

CSS:

.container {
  width: 400px;
  height: 200px;
  border: 2px solid #cccccc;
  background-color: #151515;
  color: red;
}

.container span {
  background-color: darkgreen;
  color: white;
  margin-left: -60px;
}

.container div {
  background-color: aquamarine;
  color: blue;
  margin-top: -14px;
}