title: Text added as label to a Qualtrics slider keep changing position
body: <p>I am creating a survey in Qualtrics. One of the questions includes a slider. The image below shows how I would like the question to look like. As you can see five labels have been added to the slider, and three of them are composed of both a graphic and a text; the text is at the bottom. To have the text at the bottom I clicked on "Text Position / Bottom".</p>
  
  <p><a href="https://i.stack.imgur.com/jCbmQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jCbmQ.png" alt="enter image description here"></a></p>
  
  <p><strong>Problem is, once I go to Preview or just reload the page the text goes back to the top:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/W3HhB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W3HhB.png" alt="enter image description here"></a></p>
  
  <p>The html code for the text "100% Jar A" (I guess it is html, forgive my ignorance) is:</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-html lang-html prettyprint-override"><code>&lt;span style="font-size:16px;"&gt;&lt;strong&gt;100% Jar A&lt;/strong&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>After some online digging, I tried the following code snippet:</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-html lang-html prettyprint-override"><code>&lt;div style="position: absolute; bottom: 12px;"&gt;
  100% Jar A
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now the text "100% Jar A" is at the bottom, but behind the graphic:</p>
  
  <p><a href="https://i.stack.imgur.com/Y7lZV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y7lZV.png" alt="enter image description here"></a></p>
  
  <p>How can I fix that?</p>