title: Display second <span> element in front of first
body: <p>I'm trying to get a second sibling  element displaying in front of the first - with some severe restrictions:</p>
  
  <p>I cannot alter the HTML or use javascript or jQuery.</p>
  
  <p>I can only use CSS.</p>
  
  <p>I can't change how classes are assigned (again, I don't have access to change any code apart from the one bespoke CSS file).</p>
  
  <p>The left-hand menu features a number of the above HTML structures, building a clickable menu for the sections on the page. When a page section is completed, the 'completed-section' class is added to the first span (as shown above). This is what is causing me problems:</p>
  
  <p>The CSS styling of the nav-link 'button' should change when it's completed, but since I can't access the parent of a CSS-selected element I need to make these changes directly to the 'menu-number' span element, including a 'nav-link' sized background colour. So I've made the menu-number  the same size as the containing 'nav-link' . But when I add a background colour to the 'menu-number' , the text in the second  is obscured.</p>
  
  <p><strong>How can I 'move' the second span in front of the first so I can see its text?</strong></p>
  
  <p>I have also tried making both spans position absolute or position relative and used z-index but this pulls the spans out of the flow of the document and means the width of the menu collapses. I can't set the width to a hard-coded value because the menu toggles open and closed, width-wise, (without a class being set) and the toggled width is set by javascript which, again, I can't access.</p>
  
  <p>I have also tried using display: flex on the 'a' element and reversing the 'order' of span elements. No luck.</p>
  
  <p>In semi-desperation I have tried setting the direction property on 'nav-link' to rtl. No luck.</p>
  
  <p>I think I've tried a couple other things too, but at this point I'll wrap this question up.</p>
  
  <p>Any pointers, much appreciated...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.menu-number {
   border: none;
   border-left: 10px solid transparent;
   border-radius: 0px;
   padding-top: 13px;
   padding-left: 20px;
   height: 45px;
   position: absolute;
   width: 100%;
   text-align: left;
   z-index: 100;
      float: left;
  }
  .menu-number + span {
   /*position: absolute;*/
   padding-left: 40px;
   z-index: 200;
  }
  .completed-section {
   color: #42bb76 !important;
   border-left: 10px solid #42bb76;
   background-color: #274d56;
   text-decoration: underline;
  }
  .nav-link &gt; div &gt; a {
   display: flex;
   */flex-direction: row-reverse;*/
  }
  .nav-link &gt; div &gt; a &gt; span:nth-of-type(1) {
      order: 2;
  }
  .nav-link &gt; div &gt; a &gt; span:nth-of-type(2) {
      order: 1;
  }
  .nav-link &gt; div &gt; a &gt; .section-name {
  color: white;
  padding: 13px 20px 0px 60px;
  height: 45px;
      float: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="nav-link"&gt;
      &lt;div&gt;
          &lt;a href="scroll/to/section"&gt;
              &lt;span class="menu-number completed-section"&gt;1.&lt;/span&gt;
              &lt;span class="section-name"&gt;Section name&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've also tried 'flex-direction' but I've now commented that out.</p>