title: Prevent fixed element from disappearing when on page with relative positioned element
body: <p>I must completely misunderstand <code>position: fixed;</code>.</p>
  
  <p>I would like the fixed element at the bottom of the page to always occupy the bottom of the screen.  It works as expected on Chrome 48.0.2564.116 Mac 10.9.5, even when the window is resized such that <code>window.document.body.clientWidth</code> is less than the left position of the relative element, i.e. 400px, which is less than 510px .  But viewing this page in Chrome on Android results in the <code>.justifiedBottom</code> component disappearing off the bottom of the screen if the relative positioned element is positioned at with a left value greater than the width of the screen (or if its width is not set to 0px (?!)).</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
    &lt;style&gt;
      .positionedRelative {
        position:relative;
        top: 300px;
        width: 0px;
        left: 510px;
      }
  
      .justifiedBottom {
        padding: 5px;
        background-color: rgba(200,200,200,0.5);
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
      }
    &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="positionedRelative"&gt;
      Hello
    &lt;/div&gt;
    &lt;div class="justifiedBottom"&gt;Next Page&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>With a clientWidth of 360 and left position of .positionedRelative of 322px, the following is produced (note that the fixed element is being pushed off the bottom of the screen):</p>
  
  <p><a href="https://i.stack.imgur.com/D9AVW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D9AVW.png" alt="fixed element is being pushed off the bottom of the screen"></a></p>
  
  <p>Any thoughts or pointers in the right direction would be much appreciated.  Thanks.</p>