title: CSS position: relative affecting text position
body: <p><a href="https://jsfiddle.net/xpzxysuy/2/" rel="nofollow">https://jsfiddle.net/xpzxysuy/2/</a></p>
  
  <p>So I'm playing around with some basic CSS to learn it I've run into this thing where in the case of a specific div using position: relative, the default positioning of the child text becomes affected (.right, the green div on the first line). Text-align does not affect the element in this case either.</p>
  
  <p>The only way to affect the text's positioning in this case is to use css on the text element itself (any of the commented out sections in .words).  Though in another div (.middle), there is text of the same class which text-align works on just fine. What is going on here?</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"&gt;&lt;/script&gt;
  &lt;div id="centerDiv"&gt;
      &lt;div id="div1"&gt; 
         &lt;div class="left"&gt;
             &lt;div class="circleDiv"&gt;&lt;/div&gt;
         &lt;/div&gt;
         &lt;div class="middle"&gt;
             &lt;p class="words"&gt;Try&lt;/p&gt;
         &lt;/div&gt;
         &lt;div class="right"&gt;
             &lt;p class="words"&gt;Word&lt;/p&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="div2"&gt;
          &lt;p class="sentences"&gt;I'm a computer.&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="cleanDiv"&gt;
      In the digital world there's only three things to do.
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>html, body {
      width: 100%;
      height: 100%;
  }
  
  #centerDiv {
      width: 50%;
      height: 50%;
      background: red;
  }
  
  #div1 {
      width: 100%;
      height: 50%;
      background: orchid;
  }
  
  #div2 {
      width: 100%;
      height: 50%;
      background: beige;
  
      text-align: right;
  }
  
  .left {
      position: relative;
      float: left;
      width: 15%;
      height: 100%;
      background: orange;
  }
  
  .circleDiv {
      position: relative;
      width: 80%;
      height: 50%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: blue;
  }
  
  .middle {
      position: relative;
      float: left;
      width: 25%;
      height: 100%;
      background: yellow;
      /*left: 5%;*/
      text-align: center;
  }
  
  .right {
      width: 60%;
      height: 100%;
      background: green;
  
      /*
      float: right;
      text-align: center;
      */
  
      /*
      display: flex;
      justify-content: center;
      align-items: center;
      */
  
      position: relative;
      left: 40%;
      text-align: left;
  }
  
  .words {
      font-family: Times New Roman;
      font-size: 30px;
      color: pink;
      margin: 0 0 0 0;
  
      /*
      padding-top: 70px;
      padding-bottom: 70px;
      */
  
      /*
      height: 550%;
      line-height: 550%;
      */
  
      /*
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      */
  
  }
  
  .sentences {
      font-family: Times New Roman;
      font-size: 50px;
      color: purple;
  
      margin: 0 0 0 0;
  }
  </code></pre>
  
  <p><strong>Edit</strong>:
  For clarification, I was originally trying to line divs up side by side.  This works using the "float: right" and "display: flex" methods I have commented out in the css.  I'm wondering why "position: relative", though it positions the div correctly, makes the text behave strangely.  That is, it's initial position should be in the top-left of the div, but instead it appears in the top right, and ignores text-align.</p>