title: bottom css property makes item dissappear
body: <p>I'm in a css firestorm trying to figure this out.</p>
  
  <p>I have this code</p>
  
  <pre><code>.spectator-chat-title{
      background-color: darken($content-container-bg, 5%);
      height: 30px;
      padding: 3px;
      color: #ddd;
      border-top: 1px solid #1C2337;
      box-shadow: 0px 1px 1px darken($content-container-bg, 10%);
      z-index: 1001;
      position: absolute;
      width: 100%;
      bottom: 0;
  
      &amp;.collapse{
          bottom: 50px;
      }
  
  }
  </code></pre>
  
  <p>then I have this ng-class method in my markup</p>
  
  <pre><code>&lt;div class="spectator-chat-title" ng-class="{'collapse':chatHide}"&gt;
          &lt;i ng-click="chatHide = !chatHide" ng-class="{'fa-angle-double-down':!chatHide, 'fa-angle-double-up':chatHide}" class="fa pull-right"&gt;&lt;/i&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I'm in chrome dev tools and change the bottom property to 50px it works. But when I add the 'collapse' class through ng-click... the item just POOFS and disappears. Any ideas? '</p>